All you need to do is add overflow: visible
to .ui-dialog
class and remove overflow from .ui-dialog .ui-dialog-content
.
.ui-dialog {
overflow: visible
}
.ui-dialog .ui-dialog-content {
overflow: inherit;
}
Question
I have a jquery menu, with sub menus, inside of a jquery dialog like this.
http://jsfiddle.net/pnmpn25/VPXjs/17/
$("#menu").menu();
$("#dlg").dialog();
My problem is that when I open a sub menu, it gets hidden inside of the div and scroll bars appear. What I would like to happen is that the sub menu overlaps the dialog. I've tried setting z-index, to no avail (with position:absolute)
This question is similar, but has no accepted answer.
Problem: Menu UL is always behind jquery dialog
Any ideas?
Solution
All you need to do is add overflow: visible
to .ui-dialog
class and remove overflow from .ui-dialog .ui-dialog-content
.
.ui-dialog {
overflow: visible
}
.ui-dialog .ui-dialog-content {
overflow: inherit;
}
OTHER TIPS
Add a class to all the submenu's
Then, on click of each of these submenu's resize the dialog box to the desired width
Also, here's the sample code:
<li class='submenu'><a href="#">Ada</a></li>
<li class='submenu'><a href="#">Adamsville</a></li>
<li class='submenu'><a href="#">Addyston</a></li>
<li class='submenu'>
$('.submenu').click(function() {
$('#dlg').dialog('option','width',460);
});