Beginnerprogrammer Beginnerprogrammer - 8 days ago 5
Javascript Question

Set height of p element based on content inside it

I have a notification panel where I show the last notification. But the content of the notification depends on what the notification pushes. So this can vary from a very short message to a longer one. The short message are shown perfectly but the longer once are not shown correctly now I wrote it like this to look better:

And this is the HTML where I am talking about:

<div data-role="content" class="ui-content">
<ul data-role="listview">
<li id="notification-block">
<img class="notification_bell" src="img/icons/alert.png">
<div class="notification-wrapper">
<h2 class="notification-header"></h2>
<p class="notification-message"></p>
<p class="read-more">
<a href="#all" style="text-decoration: none" data-transition="slide">
Meer <span class="fa fa-angle-right carot"></span>
</a>
</p>
</div>
</li>
</ul>
</div>


And this is how I set the content of the notification message dynamically:

$(".notification-header").append(title);
$(".notification-message").append(message).first("p");


As you see in the Fiddle it will have overflow hidden en elipsis. But What I want is that it changes the height and break the line to read it all.

Here is recreated FIDDLE

Answer

Change height: 150px to min-height: 150px for #notification-block and reset the white-space property for notification-message:

#notification-block .notification-message {
    white-space:normal;
}

Updated fiddle: http://jsfiddle.net/84ps035L/