CODEWITHSUNDEEP
csstwitter-bootstrap
Renato Gama
Renato Gama

Reputation: 16519

How to make bootstrap dropdown be shown over a modal-footer instead of making modal overflow?

I have created a modal to allow users to add alarms, one alarm can have many notifications of different kinds, so I want the user to choose which kind of notification he wants via a dropdown.

You can see a (not 100% working) fiddle here: http://jsfiddle.net/renatoargh/teX7Y/

I am using Bootstrap version 2.3.2.

Basicaly what happens is shown in the pictures below:

1- Initial state

initial state

2- Broken state, with dropdown making modal overflow instead of appearing over it

enter image description here

I have tried setting a huge value to z-index of ul#dropdown-menu but it doesn't seems to work. Also I have tried changing the display property without success.

Can someone help me?

EDIT Opening the dropdown upwards (dropup) to the upside is also not an option since the problem occurs (when the screen is resized to desktop size); http://jsfiddle.net/hashem/teX7Y/1/

Upvotes: 11

Views: 20073

Answers (1)

Bryce Easley
Bryce Easley

Reputation: 4841

You can just add another class to your modal-body

 <div class="modal-body girlLookAtThatBody">

and of course

 .girlLookAtThatBody{
    overflow-y:inherit !important;
}

So check it:

http://jsfiddle.net/uUvyy/

Hope that helps!

Upvotes: 23

Related Questions