CODEWITHSUNDEEP
csstwitter-bootstrap
Brian Powell
Brian Powell

Reputation: 3411

What is causing this force left formatting on bootstrap dropdown's menu?

I have the following HTML code:

<div style="text-align: center;">            
      <h2 class="bpcenter" style="color: white;">ONE</h2>        

    <div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Settings
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
</div>

which right now, is giving me this output:

enter image description here I'm using the standard bootstrap 3.3.2 css/js files, and I haven't modified anything in the css code for .dropdown or .dropdown>menu.

The button is centered, but the <ul> and its subsequent <li>s are justified left. I'm not sure why.

Upvotes: 1

Views: 100

Answers (1)

dfsq
dfsq

Reputation: 193311

The problem is that dropdown div expands to 100% width, and inner menu is positioned absolutely relatively to it and has left: 0.

You need to set your button as inline-block in this case menu will position properly:

<div class="dropdown drop-button">
    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Settings
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Action</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Another action</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Something else here</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</div>

CSS:

.drop-button {
    display: inline-block;
}

Demo: http://plnkr.co/edit/07w4pjNVnjd7p71fGOCT?p=preview

Upvotes: 1

Related Questions