Dropdown Menu Causes Scrollbar December 05, 2022 Post a Comment I used this example from W3C: Solution 1: Could you try this? <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 dropdown-menu-right" 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> Copy 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; }Copy <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>Copy 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> Copy 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 **/ Copy Share Post a Comment for "Dropdown Menu Causes Scrollbar"
Post a Comment for "Dropdown Menu Causes Scrollbar"