How to make the bootstrap popup window appear on top of the modal footer instead of doing modal overflow?

Question

I created a modal mode that allows users to add alarms, one alarm can have many notifications of different types, so I want the user to choose which notification he wants using the drop-down menu.

Here you can see the script (not 100%): http://jsfiddle.net/renatoargh/teX7Y/

I am using Bootstrap version 2.3.2 .

Basically, what happens is shown in the figures below:

1- Initial state

2- A broken state with a drop-down list doing modal overflow, instead of appearing above it

I tried setting the huge z-index to ul#dropdown-menu , but it does not seem to work. I also tried to change the display property without success.

Can someone help me?

EDIT Opening a tooltip up (dropup) up is also not an option, since a problem occurs (when the screen size changes to the size of the desktop); http://jsfiddle.net/hashem/teX7Y/1/

Answer 1

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 this out:

http://jsfiddle.net/uUvyy/

Hope this helps!