CODEWITHSUNDEEP
csstwitter-bootstrap
HowApped
HowApped

Reputation: 1021

z-index of bootstrap button dropdown

I'm having issues with the z-index of a bootstrap dropdown.

http://jonwhittlestone.com/public/z.html

Portion of the page

In this page, the pass button's associated dropdown is appearing on a lower layer that the container and appears to constrain it.

Editing the following doesn't seem to fix.

Web inspector screenshot

Any ideas CSS people?

Thanks

Jon.

Upvotes: 0

Views: 3859

Answers (5)

Ole Haugset
Ole Haugset

Reputation: 3797

The reason your dropdown isn't being shown is that this element has the CSS option of overflow:hidden:

<div class="panel panel-default">

Edit bootstrap-alizarin.css line 4100 and remove overflow:hidden.

After you have done this, insert the following code after the closing tag of the .sanctions-result-actions div:

<div style="clear:both;"></div>

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

I can see that a parent div with class="panel panel-default" has an overflow: hidden. If you want to display the inner div out of it's parent overflow-hidden div, you must place this div out of the current one. Check this post: post

Upvotes: 0

montexristos
montexristos

Reputation: 290

The rule overflow: hidden on the container is the problem

override it to overflow: visible

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

it is overflow:hidden issue make this changes of the .panel

overflow:hidden will not allow its children to show if are coming out

.panel-group .panel {
    background: #fbfbfb;
    margin-bottom: 0;
    border-radius: 5px;
    /* overflow: hidden; */ /* remove this */
    float: left; /* and add this */
    width: 100%; /* and add this */
    }

Upvotes: 1

Krzysiek
Krzysiek

Reputation: 2495

There is other css style (bootstrap-alizarin.css:4100), you have to change it:

.panel-group .panel { 
    /*...*/
    overflow: hidden; /* to remove */
}

Upvotes: 0

Related Questions