Overflow Bootstrap Dropdown within UI Dialog

Ok, a quick blog post on what I am working on since I didn’t see much out there on this issue.

I have a UI dialog open up with a listing of documents attached to a particular product. There are associated attributes for each document in a table and at the end there is a dropdown menu for all kinds of actions related to each document (like edit, delete, revise, etc…)

Well the UI dialog object is initialized with height ‘auto’ which is fine for the initial load. But after opening the dropdown the items tend to fall behind the dialog and then a scroll bar is appended to the right. Not very good looking in my opinion. So what seems like the correct solution is to change the z-index of the dropdown menu. Not correct! Since the dropdown is contained within the dialog, you actually need to allow the dialog to overflow by using CSS overflow:visible.

But be careful with this, if you are doing a lot of dynamic DOM manipulation, you will have to manually adjust the height of the UI dialog like $().dialog('option','height','auto'). The reason for this is because if the table were to adjust because of new documents added, then they would overflow the dialog outside of it, which is not what we really want.

So be careful using this technique, you will have to programmatically handle some issues. Be sure to test everything with UI testing. Click every dropdown! Hope this helps someone.