I have a layout that looks like this:
<html>
<head>
stuff here
</head>
<body>
<div id="master">
<div id="toolbar">
<input type="text" id="foo">
</div>
<div id="content">
a whole bunch of content in here
</div>
</div>
</body>
</html>
'#master' is a container for a jquery UI dialog. I'd like the contents of the '#content' div to be scrollable but for '#toolbar' to NOT be scrollable. Is this doable with jquery UI's dialog?
Just use css rules:
#content { overflow: auto; height: [desired height] }
Where you might need to use jQuery is if the modal has a dynamic height. In that case on open
of the modal you could set the inner container height. Something like:
open: function(){
var modalHeight = $('#master').height();
$('#content').height(modalHeight - [footer and title]);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With