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: 10px15px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="wrapper"><divclass="navbar-right"><divclass="dropdown"><buttonclass="btn btn-sm dropdown-toggle"type="button"id="menu1"data-toggle="dropdown"><spanclass="glyphicon glyphicon-menu-hamburger"></span></button><ulclass="dropdown-menu"role="menu"aria-labelledby="menu1"><lirole="presentation"><arole="menuitem"href="#">HTML</a></li><lirole="presentation"><arole="menuitem"href="#">CSS</a></li><lirole="presentation"><arole="menuitem"href="#">JavaScript</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="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

<divid="container"><tableid="table"class="custom-class"><!-- NEW CLASS ADDED --><tr><td></td><td><divclass="dropdown"><buttonclass="btn btn-sm dropdown-toggle"type="button"id="menu1"data-toggle="dropdown"><spanclass="glyphicon glyphicon-menu-hamburger"></span></button><ulclass="dropdown-menu"role="menu"aria-labelledby="menu1"><lirole="presentation"><arole="menuitem"href="#">HTML</a></li><lirole="presentation"><arole="menuitem"href="#">CSS</a></li><lirole="presentation"><arole="menuitem"href="#">JavaScript</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="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;
      }

      #tabletd:last-child {
        width: 1%;
      }


      /** NEW CODE ADDED **/.custom-class.dropdown-menu {
        right: 0;
        left: initial !important;
      }


      /** NEW CODE ADDED END **/

Share