CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
bryan
bryan

Reputation: 9369

Dropdown menu appears on right instead of underneath anchor

If I'm floating an element left that I want to be the toggle of the dropdown, the dropdown appears on the left side. I'm trying to get it to go to the bottom.

This usually doesn't happen in the regular bootstrap so I'm a bit lost. Anyone have any suggestions?

Here is a Plunker example

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

Upvotes: 5

Views: 1302

Answers (2)

Vlad274
Vlad274

Reputation: 6844

I modified the Plunk here and it seems to be what you want.

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

The key changes:

  1. Using div instead of span. Span is an inline-block element (it appears on the same line) and div is a block element (it appears on a new line)
  2. Add the clearfix class. When using float, it prevents all objects from colliding with it (and therefore ruining our plan of getting div on a new line). The clearfix class corrects for floating elements.

Upvotes: 0

isherwood
isherwood

Reputation: 61053

I can't explain why, but the float is the problem. Set the anchor inline-block instead.

Demo

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

Upvotes: 1

Related Questions