Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable scrolling on a single div?

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?

like image 588
gdanko Avatar asked Dec 29 '22 01:12

gdanko


1 Answers

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]);
}
like image 87
Josiah Ruddell Avatar answered Dec 30 '22 15:12

Josiah Ruddell