CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Rainier laan
Rainier laan

Reputation: 1130

Bootstrap 4 Custom dropdown alignment

I'm trying to make a custom drop-down menu. And I got an idea. It sort of needs to look like this:

enter image description here

But instead it got it looking like this:

enter image description here

I honestly can't figure out why this is the case. I tried using columns but that doesn't really work in dropdowns. I'm desperately looking for an answer. This is the HTML code, I couldn't get it to work in a snippet, Sorry about that.

<li class="nav-item dropdown icondropdown">
  <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="badge badge-danger badge-custom">1</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1 " aria-labelledby="navbarDropdown" style="width: 300px; border-radius: 7px; padding-bottom: 0">
    <a class="dropdown-item text-center">
      <h5>Inbox</h5><span class="badge badge-danger badge-custom2">1</span></a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      <img src="img/foto.jpg" class="rounded-circle" width="42">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Rainier laan</b> heeft gereageert op je bericht.</p>
    </a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      <img src="img/johan.jpg" class="rounded-circle" width="42">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Johan Strootman</b> heeft je bericht geliked.</p>
    </a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      <img src="img/lil-bub.jpg" class="rounded-circle" width="42">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Bill Gates</b> heeft gereageert op je bericht.</p>
    </a>
    <div class="dropdown-divider m-0"></div>
  </div>
</li>

Thanks in advance!

Upvotes: 0

Views: 714

Answers (2)

Omar Sohel
Omar Sohel

Reputation: 174

i think you should manipulate the < p > tag in css like below

p{
	display:inline-block;
    width:200px;
    position: relative;
    word-break: break-all;
	white-space:normal;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>

<body>
<li class="nav-item dropdown icondropdown">
  <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="badge badge-danger badge-custom">1</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1 " aria-labelledby="navbarDropdown" style="width: 350px; border-radius: 7px; padding-bottom: 0">
    <a class="dropdown-item text-center">
      <h5>Inbox</h5><span class="badge badge-danger badge-custom2">1</span></a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      
	  <div class='row'><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" class="rounded-circle" width="50" height="50"></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Rainier laan</b> heeft gereageert op je bericht.</p>
	  </div></div>
    </a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
	<div class='row'><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" class="rounded-circle" width="50" height="50"></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Johan Strootman</b> heeft je bericht geliked.</p>
	  </div></div>
    </a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      
	  <div class='row'><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" class="rounded-circle" width="50" height="50"></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Bill Gates</b> heeft gereageert op je bericht.</p>
	  </div></div>
    </a>
    <div class="dropdown-divider m-0"></div>
  </div>
</li>
</body>
</html>

Upvotes: 1

Mario Junior Torres Perez
Mario Junior Torres Perez

Reputation: 139

the .dropdown-menu has a property called white-space: nowrap; You just need remove it.

This a default boostrap styles.

.dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: 400;
    color: #292b2c;
    text-align: inherit;
    white-space: nowrap;
    background: 0 0;
    border: 0;
}

this is the new style.

.dropdown-item {
        display: block;
        width: 100%;
        padding: 3px 1.5rem;
        clear: both;
        font-weight: 400;
        color: #292b2c;
        text-align: inherit;
        background: 0 0;
        border: 0;
    }

And with this changes you will fix you issue.

Upvotes: 0

Related Questions