Ankur Soni Ankur Soni - 1 month ago 12
CSS Question

ADMIN LTE Notification dropdown not wrapping content

Notification Image:

Notification Bar

From above Image it is clear that the Notification panel is not wrapping the content of the

message
. the actual text inside content is long, which is

saurabh raised first
request to review Task
'ABCDE NOV 2017'
with Assignment ID 'Qg9hBNSTozkExpTYn'


Below is the code that I am using to show notification.

<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" id="notificationLink" data-toggle="dropdown"></a>
<ul class="dropdown-menu">
<li>
<ul class="menu">
{{#each notifications}}
<li>
<a href="#">
<small><strong>{{title}}</strong></small>
<div class="pull-right">
<small style="pull-right">
<i class="fa fa-clock-o"></i> {{createdAt}}
</small>
</div>
<div class="row pull-left">
<p>{{message}}</p>
</div>
</a>
</li>
{{/each}}
</ul>
</li>
</ul>
</li>


Any Idea How to wrap the text?


You can view page here

Answer Source

Here is how to fix that:

.notifications-menu .menu > li a p {
  white-space: normal;
}

CSS selector has been adjusted for the html code you've shown.