4

I used this example from W3C:

<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>

And it all works, except for one thing. Whenever dropdown is opened it outfits the page making a horizontal scrollbar to appear. Ref screenshot below (note horizontal scrollbar at the bottom of the images):

enter image description here enter image description here

What would be most "official" way to fix this?

EDIT:

Added fiddle: https://jsfiddle.net/aav5f25g/3/

Improve this question
4
  • 1
    Please provide the CSS and JavaScript, if there is any. Commented Aug 10, 2016 at 12:37
  • Standard bootstrap's CSS. No modification except I used this theme: bootswatch.com/yeti Commented Aug 10, 2016 at 12:40
  • Just checked without this theme, same thing. Commented Aug 10, 2016 at 12:42
  • Added fiddle: jsfiddle.net/aav5f25g/3 Commented Aug 10, 2016 at 13:09

3 Answers 3

Reset to default
8

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>

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Yes, that works. However not ideally, as it aligns whole menu at the right border even when there's enough space to keep it aligned at left border. I'll wait a bit for other answer, if there will be any and choose an answer.
I think , its better if you provide code in jsfiddle. because without your css and js. we cant find the problem. or you can host you page then share.
I'm unsure what you mean by there being enough room, in the original screenshot it goes off. Do you mean that there's enough room for the text, but the padding is causing it? If so, I'd suggest targeting the menu specifically and overriding the width or similar to make it smaller. Although to be honest I'm not sure what that gains you over aligning a menu on the right hand side of the screen so that it displays inwards
@DanielEdwards it just feels more what I'm used to. Dropdown menus are usually aligned at the left. Nothing extra. And about 'enough room', i mean if you reduce #table width to say 50% in this fiddle: jsfiddle.net/aav5f25g/3 With table at 50% it looks exactly what I want, and at table's width of 95% I want it to look as your solution :)
Choosing as correct answer, because Daniel was the first to answer. Other provided similar solutions.
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/

Improve this answer

4 Comments

Yes, that looks right on the full page preview. But whenever I modify my existing code (jsfiddle.net/aav5f25g) it doesn't work this way.
Thanks, but the scrollbar still appears. Btw, I've updated my original fiddle to something closer to real-life scenario.
Updated your fiddle. Please check - https://jsfiddle.net/aav5f25g/6/
Yeah, that works. But with same limitation as @DanielEdwards solution.
1

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 **/
Improve this answer

3 Comments

You've wrapped the whole header in a table when you can achieve the same thing by adding one class that comes with Bootstrap...
I added new class because I need to make some changes in 'dropdown-menu' class. if I do it in core file it will effect every where. so I added new class to specify the CSS. I add new css as well. moreover I made change in @aleksandrmakov, what he provided in jsfiddle.
Sorry perhaps I wasn't clear, your solution basically just replicates one that is already provided by bootstrap. dropdown-menu-right adds right: 0 and left: auto. There's not much need to create a custom class to do it when it provides one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.