CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Ethan
Ethan

Reputation: 85

CSS Bootstrap dropdown positioning

I am having trouble positioning a bootstrap dropdown element. I have the dropdown anchor and menu within a list item, alongside a thumbnail and some text (also within an anchor):

<div class="panel-list">
    <ul>

        <li class="panel-list-item">

            <div class="pull-right panel-list-option">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                    <i class="fa fa-ellipsis-v" ></i>
                </a>

                <ul class="dropdown-menu">
                    <li><a href="/user/profile">Profile</a></li>
                    <li class="dropdown-header">3</li>
                    <li class="divider"></li>
                    <li><a href="/user/logout">Logout</a></li>
                </ul>
            </div>

            <a href="#m">

                <div class="pull-left">
                    <img class="panel-list-option-img"
                         src="http://blogs-images.forbes.com/tomiogeron/files/2012/10/Stripe-logo.jpeg"
                         height="30" width="30">

                </div>

                <div class="col-xs-10">
                    <h1>Stripe</h1>
                    <p class="description">Payment Processing for Developers</p>
                </div>
            </a>

        </li>
    </ul>
</div>

However, the dropdown appears in a location below the div as in this picture:

screenshot

CSS:

.panel-list ul{
    margin:0;
    padding:0;
}
.panel-list-item>a{
    overflow:hidden;
    padding:10px 10px 0 10px;
    background-color:#fff;
    display:block;
    color:#888;
}


.panel-list-option a {
    position:relative;
    display:block;
    padding:10px;
}

.panel-list-option ul{
    display:absolute;
    z-index:1;
    float:right;
}

What is the best way to do this?

Upvotes: 1

Views: 1271

Answers (1)

user3142418
user3142418

Reputation: 372

You're missing the .dropdown class around the trigger + menu - it should instead be:

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    <!-- Menu HTML .. -->
</div>

This class is needed to position the dropdown menu relative to its trigger (the <a>). From the docs:

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

Upvotes: 3

Related Questions