Geek Answers Handbook

A popup menu appears on the right, not the bottom

If I float, the remaining item that I want to be a toggle of the drop-down list, a drop-down menu appears on the left side. I'm trying to get him to keep up.

This usually does not happen on a regular bootstrap, so I'm a little lost. Anyone have any suggestions?

Here is an example of a plunker

<div id="top-header" class="slide" ng-controller="DropdownCtrl"> <div id="cornerBox"></div> <span class="dropdown" dropdown on-toggle="toggled(open)"> <a id="logo" class="clearfix dropdown-toggle" dropdown-toggle><span>{{ "header" }}</span></a> <ul class="dropdown-menu"> <li ng-repeat="choice in items"> <a href>{{choice}}</a> </li> </ul> </span> <div id="searchBar"> <div>&nbsp;</div> </div> </div>

CSS

 #cornerBox { float:left;width:50px;height:50px;background-color:#3CC274; } #top-header { position:absolute; height: 56px; width:100%; max-height: 50px; background-color:#24BD66; color:#fff; z-index:3; box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.23); } #logo { font-weight:400; color:#000; display:block; position:relative; text-decoration:none; float:left; width:100px; margin:3px 0 0 15px; height:30px; font-size:30px; cursor:pointer; } #searchBar { position:relative;width:68%;margin:0 auto;left:100px;border-radius:3px;height:35px;margin-top:7px;background-color:#5ECD8C;} #searchBar div { float:left;width:50px;height:35px;text-align:center;line-height:35px;font-size:15px; }
+5
source share
2 answers

I can’t explain why, but the problem is with float. Instead, set the anchor inline-block .

Demo

(My personal policy is to try the built-in block before the floats in each case - floats tend to cause more problems than they solve.)

+1
source

I changed Plunk here and it looks like what you want.

  <div class="dropdown clearfix" dropdown on-toggle="toggled(open)"> // Other Code </div>

The key is changing:

  • Using div instead of span. Span is an element of an inline block (it appears on one line), and a div is an element of a block (it appears on a new line).
  • Add class clearfix. When using float, it does not allow all objects to collide with it (and, therefore, destroys our plan to get a div on a new line). The clearfix class fixes for floating elements.
0
source

More articles:


All Articles