CODEWITHSUNDEEP
javascriptjquerycssjquery-uihtml
gdanko
gdanko

Reputation: 1992

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?

Upvotes: 4

Views: 12726

Answers (2)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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]);
}

Upvotes: 10

Chris Baker
Chris Baker

Reputation: 50602

Use CSS to give the #content div a set height and optionally a width, and set the CSS property overflow: auto on that div as well. If the content exceeds the height, you'll get a scrollbar.

Upvotes: 0

Related Questions