CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Rainier laan
Rainier laan

Reputation: 1130

Bootstrap 4 Dropdown text doesnt stay inside div

I've been struggling with this problem for way too many hours and I'mn honestly getting pretty desperate but I just can't find a solution. I'm trying to make a notification dropdown in bootstrap 4. I've tried many different things but none of them worked. The drop-down needs to look something like this:

enter image description here

But my problem is with the text and the date. They just don't fit in the div, They go outside of the whole dropdown like this:

enter image description here

I tried linebreak but that doesn't work. For some reason, I can't get bootstrap to work in the snippet so sorry about that.

.heading {
    color: #747F8B;
    font-size: 14px;
}

.highlight {
    font-weight: bold;
}

.dropdown-item-style {
    background-color: #e9eff2;
    padding: 15px;
}

.dropdown-item-style:hover {
    background-color: lightgrey;
    color: #ffffff;
}

.triangle {
    position: absolute;
    top: -8px;
    left: 134px;
    height: 15px;
    width: 15px;
    border-radius: 6px 0px 0px 0px;
    transform: rotate(45deg);
    background: #FFF;
}

.dropdown-title {
    color: #747f8b;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    padding-left: 15px;
    padding-right: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<li class="nav-item dropdown icondropdown " id="notification-dropdown">
  <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="noti-navbar-badge">3</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1" aria-labelledby="navbarDropdown" style="width: 300px; padding-bottom: 0; top: 70px; border: none; padding-top: 5px;">

    <span class="triangle"></span>
    <a class="dropdown-item dropdown-title">
      <span class="heading">Notificatie's</span><span class="float-right" style="font-size: 14px;">Instellingen</span>
    </a>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>

    <div class="dropdown-item dropdown-item-style" href="#">
      <div class="row">
        <div class="col-md-2">
          <img src="img/johan.jpg" class="rounded-circle" width="32">
        </div>
        <div class="col-md-10">
          <a href="">
            <span class="highlight" style="line-break: auto">Bill gates</span> heeft je bericht geliked.
          </a>
          <small class="text-muted">5 Dagen geleden</small>

        </div>
      </div>

    </div>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>
  </div>
</li>

Upvotes: 1

Views: 1959

Answers (2)

Marouen Mhiri
Marouen Mhiri

Reputation: 1667

the problem is that .dropdown item has .white-space: nowrap; this will prevent breaking the words to new lines. I'll put the notification in a span and set white-space: normal for it. like that (I added a new class 'more-info'). And remove the flex-wrap: nowrap; from the row containing the notification because you want the text being near the image:

.heading {
    color: #747F8B;
    font-size: 14px;
}

.highlight {
    font-weight: bold;
}

.dropdown-item-style {
    background-color: #e9eff2;
    padding: 15px;
}

.dropdown-item-style:hover {
    background-color: lightgrey;
    color: #ffffff;
}

.triangle {
    position: absolute;
    top: -8px;
    left: 134px;
    height: 15px;
    width: 15px;
    border-radius: 6px 0px 0px 0px;
    transform: rotate(45deg);
    background: #FFF;
}

.dropdown-title {
    color: #747f8b;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    padding-left: 15px;
    padding-right: 15px;
}
.dropdown-item .more-info {
    white-space: normal;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<li class="nav-item dropdown icondropdown " id="notification-dropdown">
  <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="noti-navbar-badge">3</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1" aria-labelledby="navbarDropdown" style="width: 300px; padding-bottom: 0; top: 70px; border: none; padding-top: 5px;">

    <span class="triangle"></span>
    <a class="dropdown-item dropdown-title">
      <span class="heading">Notificatie's</span><span class="float-right" style="font-size: 14px;">Instellingen</span>
    </a>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>

    <div class="dropdown-item dropdown-item-style" href="#">
      <div class="row">
        <div class="col-md-2">
          <img src="img/johan.jpg" class="rounded-circle" width="32">
        </div>
        <div class="col-md-10">
          <a href="">
            <span class="highlight" style="line-break: auto">Bill gates</span> <span class="more-info">heeft je bericht geliked.</span>
          </a>
          <small class="text-muted">5 Dagen geleden</small>

        </div>
      </div>

    </div>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>
  </div>
</li>

Upvotes: 5

Gokulakrishnan M
Gokulakrishnan M

Reputation: 360

add 

.yourclassname{
       overflow:hidden;
       white-space:noraml;
}

next to the '.col-md-10' class in '.dropdown-item' container

Upvotes: 1

Related Questions