Dropdown Menu Causes Scrollbar

I used this example from W3C:

I added dropdown-menu-right to the dropdown-menu

You may find that pull-right works if you're using an older version.

Solution 2:

You can just wrap the your code in - <div> with class "navbar-right". Have created a quick demo. You can check below:

.wrapper {
  max-width: 95%;
  margin: 0 auto;
  padding: 10px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrapper">

<div class="navbar-right">
  
<div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
    </ul>
</div>
  
</div>
  
</div>

Please open demo in full page.

Update #2

Check modified fiddle - https://jsfiddle.net/g03ta3rb/

Solution 3:

So here is another answer : https://jsfiddle.net/xpkh0qyu/

Good Luck

HTML

    <div id="container">
      <table id="table" class="custom-class">
        <!-- NEW CLASS ADDED -->
        <tr>
          <td></td>
          <td>
            <div class="dropdown">
              <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
              </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
                <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
                <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </table>

    </div>

CSS

      #container {
        width: 400px;
        height: 300px;
        background-color: #ccc;
        overflow: auto;
      }

      #table {
        border: 1px solid #ddd;
        width: 380px;
      }

      #table td:last-child {
        width: 1%;
      }


      /** NEW CODE ADDED **/

      .custom-class .dropdown-menu {
        right: 0;
        left: initial !important;
      }


      /** NEW CODE ADDED END **/

Share