I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically lengthy. In my attempt to prototype this feature, I encountered difficulty in expanding the card divs beyond 457px, and I'm perplexed as to why.
Upon inspecting the card's height through the Chrome debugger, it consistently registers at 457px, even though it appears to derive this value from another source since it displays in grey. My objective is to have the card adjust its height according to its content.
Below is the current structure:
<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;">
<...content hidden for brevity...>
</div>
<div class="message inlineblock text-body">
<div style="...styling attributes...">{{message['email-body']}}</div>
</div>
<div>
<hr style="...additional styling..."/>
<span class="text-button" style="padding-left: 20px;">More</span>
</div>
</div>
This simplistic card design is accompanied by specific CSS properties detailed below:
...CSS styles provided but omitted for conciseness...
A deeper investigation into the layout unveils that the card resides within an HTML template:
<div class="feed-container">
<div class="feed-scroll">
<messages></messages>
</div>
</div>
Accompanied by corresponding CSS definitions:
...Further CSS details streamlined for clarity...
The underlying purpose of the container is to facilitate seamless scrolling with a concealed scrollbar.
In spite of these configurations, there seems to be no clear culprit limiting the card's height and obscuring the full message display. Any attempts to manually assign a height to the message div or its parent result in overflowing text confined within the card boundaries without resizing the card itself.
Pondering if overarching styles may be contributing to the issue, here's all applied on various elements:
...Global styling rules cited briefly...
The persistent inability to extend the {{message['email-body']}} section illustrates continual truncation despite endeavours to expand the div containers vertically.