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

Question

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

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

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/

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 it:

http://jsfiddle.net/uUvyy/

Hope that helps!