У меня есть красивые материальные карты, содержащие сообщения. Они находятся в бесконечной прокрутке. Желаемое поведение заключается в том, что они будут отображать полное сообщение после нажатия кнопки «больше», поскольку сообщения имеют тенденцию быть очень длинными. Прошив такое поведение, я пытался изменить свое приложение, чтобы отображать сообщения в полной мере все время, но у меня возникают проблемы с получением карт divs, чтобы получить уровень выше 457 пикселей, и я не могу понять, почему.Управление высотой div
Пройдя через отладчик Chrome, я вижу, что высота карты составляет 457 пикселей, но она всегда серая, указывая, что она достигает этой высоты из другого места. Я хотел бы сделать карту такой же высокой, как и ее содержимое.
Вот что я получил:
<div *ngFor="let message of messages">
<div class="event card" style="margin-left: 65px; width: 550px;">
<div class="card-header inlineblock" style="text-overflow: ellipses;">
<div class="card-date text-caption" style="float: right;">{{message.date}}</div>
<div class="text-title">{{message.subject | titlecase}}</div>
</div>
<div class="message inlineblock text-body">
<div style="text-overflow: ellipses; white-space: pre-wrap; height: auto;">{{message['email-body']}}</div>
</div>
<div>
<hr style="margin: 20px 0 20px 0;"/>
<span class="text-button" style="padding-left: 20px;">More</span>
</div>
</div>
Это моя самая простая карта. Вот все CSS, который отметил:
.event {
border-radius: 2px;
background-color: white;
margin: 15px 0 0 0;
padding-bottom: 20px;
}
.card {
border-radius: 2px;
transition: box-shadow .25s;
background-color: white;
margin: .5rem 0 1rem 0;
width: 100%;
justify-content: center;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.26)
}
.card-header {
width: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: 8px 20px;
}
.inlineblock {
display: inline-block;
}
.card-date {
float: right;
}
.text-caption {
font-size: 12px;
font-weight: 400;
line-height: 32px;
opacity: .54;
margin: 0 0 0 0 !important;
}
.text-title {
font-size: 20px;
font-weight: 600;
line-height: 44px;
opacity: .87;
margin: 0 0 0 0 !important;
}
.message {
display: block;
display: -webkit-box;
padding: 15px 20px 0 20px;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.text-body {
font-size: 14px;
font-weight: 400;
line-height: 25px;
opacity: .87;
margin: 0 0 0 0 !important;
}
text-button: {
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
line-height: 32px;
opacity: .87;
margin: 0 0 0 0 !important;
}
Ничего там меня поражает как порождение высоты, так что я проверил уровень выше.
Это завернутые в другой шаблон HTML:
<div class="feed-container">
<div class="feed-scroll">
<messages></messages>
</div>
</div>
Со следующим соответствующим CSS:
.feed-container {
width: 630px;
overflow: hidden;
}
.feed-scroll {
min-height: 400px;
width: 650px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding-left: 10px;
padding-right: 10px;
}
Целью контейнера является возможность бесконечной прокрутки с невидимым скроллинга.
По-прежнему меня ничто не мешает, поскольку карты ограничены по высоте, поэтому полное сообщение не отображается. Если я укажу высоту div или его родителя, текст просто переполнит карту. Карта не растет, чтобы соответствовать ей.
Поэтому я подумал, что, возможно, какой-то глобальный стиль может быть причиной этого. Вот все, что применяется:
На самом высоком DIV:
* {
box-sizing: border-box;
}
div {
display: block;
}
body {
font-family: 'Roboto', arial, sans-serif;
font-weight: 400;
color: #212121;
}
На <div class="event card style="margin-left: 65px; width: 550px;">, это то же самое, что и выше для *, div и body.
На <div class="card-header inlineblock" style="text-overflow: ellipsis;"> и <div class="card-date text-caption" style="float: right;"> и <div class="text-title">, это то же самое, что и выше для *, div и body.
Таким образом, это не похоже на заголовок, который несет ответственность.
<div class="message inlineblock text-body"> и <div style="text-overflow: ellipsis; white-space: pre-wrap; height: auto;"> не наследуют дополнительные классы, кроме *, div и body.
<hr/> действительно наследует несколько стилей, но ни один из них не будет контролировать высоту.
<span> для кнопки также наследует одни и те же глобальные классы.
Итак, на данный момент я очень смущен, почему моя карта не станет выше. Я не вижу ничего сдерживающего его, но независимо от того, насколько высокий я устанавливаю его явно, он не достигнет уровня выше 457 пикселей.
Любые мысли о том, почему?
Элемент {{message['email-body']}} просто переполняется в многоточие, несмотря ни на что. Кажется, я не могу сделать divs выше.