CODEWITHSUNDEEP
htmltwitter-bootstrap
x123
x123

Reputation: 71

boostrap dropdown menu align

I am new to bootstrap and created a website with that but my dropdown menu didn't work right it open "out of the window" so anyone can help me with that? I've tried a lot with classes but it didn't work...

https://i.sstatic.net/w2y1P.png

my code:

<div class='dropdown'>
<button class='btn' type='button' id='dropdownMenuButton' data-toggle='dropdown'>
<img class='rounded-circle float-right' height='45px' src='$profileimgurl' />
</button>
<ul class='dropdown-menu pull-left' role='menu'>
      <li class='dropdown-header'>$username</li>
            <li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
            <li class='dropdown-header'><a class=''>Friends</a></li>
            <li class='dropdown-header'><a class=''>Activity</a></li>
      <li class='divider'></li>
      <li class='dropdown-header'>Account</li>
      <li>
            <form action='includes/logout.inc.php' method='post'>
                <button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
            </form>
    </li>
</ul>
</div>

Upvotes: 0

Views: 381

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19542

This Technique only work on Bootstrap 4

This is not problem bro, its default behavior of dropdowns but for solving this situation you need to use dropdown-menu-right class, for more info go to this link.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Upvotes: 1

Robert
Robert

Reputation: 6967

The default behavior of Bootstrap's Dropdown Component is to align to the bottom left margin of whatever object triggered it. To override this behavior you apply dropdown-menu-right to the dropdown-menu. To use your own code as an example:

<ul class='dropdown-menu dropdown-menu-right' role='menu'>
<li class='dropdown-header'>$username</li>
<li class='dropdown-header'><a href='profile.php'class=''>Profile</a></li>
<li class='dropdown-header'><a class=''>Friends</a></li>
<li class='dropdown-header'><a class=''>Activity</a></li>
<li class='divider'></li>
<li class='dropdown-header'>Account</li>
<li>
  <form action='includes/logout.inc.php' method='post'>
  <button class='btn btn-link' type='submit' name='logout-submit'>Logout</button>
  </form>
</li>
</ul>

It is unclear whether you are using Bootstrap 3.x or Bootstrap 4.x, but in the latter you can also apply responsive behavior to this class (ie. .dropdown-menu-lg-right to better modify your UI on different devices or screens.

Upvotes: 1

Related Questions