soonic soonic - 2 months ago 16
CSS Question

bootstrap button's proper dropdown alignment

I have problem to remove two issues with the dropdown button.

Here is the jsFiddle

1) If you press the button and hold is shows a some kind of shadow (button pressed style) around the name "Button name 1 or 2"

2) The second problem is with the dropdown menu of "Button name 2". If I change the button's name to "Button Name 22222" the dropdown menu doesn't move to right, but it stays at the same place, it should auto align from right as the arrow points.

I don't know how to fix these two things. Please help.

HTML:

<header class="container-fluid">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-3 col-xs-6" style="border:1px solid red">
<div id="topbar1">
<div class="dropdown right">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Button Name 1 <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)">Menu Item 1</a></li>
<li><a href="javascript:void(0)">Menu Item 2</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6" style="border:1px solid red">
<div id="topbar2">
<div class="dropdown right">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Button Name 2 <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)">Menu Item 1</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Menu Item 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>


CSS:

#topbar1 .btn, #topbar2 .btn {
border: none;
background:none;
}

#topbar2 {
width: 130px
}
.right {
text-align: right;
}
.dropdown-menu {text-align: right; margin-right: 10px; min-width: 130px}

.col-sm-3 {
padding:0;
}

Answer

The blue "shadow" is an outline, you can set it off by using outline: none.

The dropdown right alignement was broke because of the width of the parent element.

I removed the width: 130px; rule, and to keep your button aligned to the left i added .pull-left to your button, and added .clearfix class to its parent, to not break the dropdown position. The outline: none rule is under #topbar1 .btn, #topbar2 .btn {}.

Here is the fiddle fixing the issue :

JSFiddle

I hope this helps ! :)

EDIT :

I moved up the .pull-left and .clearfix classes in this fiddle, to have a perfectly right aligned dropdown, because the .pull-left directly on the button was breaking the alignement.

JSFiddle

EDIT 2 :

I totaly removed any shadow on the buttons, by adding box-shadow: none; ;)

JSFiddle