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

. 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">
<ul class="menu">
{{#each notifications}}
<a href="#">
<div class="pull-right">
<small style="pull-right">
<i class="fa fa-clock-o"></i> {{createdAt}}
<div class="row pull-left">

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.