Bootstrap 3 scrollable div for table

JavascriptJqueryCssTwitter Bootstrap

Javascript Problem Overview


I am using Bootstrap 3 with a navbar at the top and a page that displays a table formatted using Bootstrap 3's table class. I would like the table (which is sitting in its own div) to be the only part of the page that is scrollable (when the width/height of the data in the table exceeds that of the page). I have styled the div for the table as follows:

.mygrid-wrapper-div {
    overflow: scroll;
    height: 200px;
}

I have a fiddle illustrating this, and I added an ugly 5px red border around the div to highlight the area that I would like to have scrollable:

http://jsfiddle.net/4NB2N/4/

Notice that scrolling left-to-right works great - I didn't have to do anything to get this to work, and the div adjusts the scrollbar automatically when the window is resized too. However, I don't know how to setup the div's height to behave the same way - I hardcoded the 200px value but really I would like the div to fill the "rest" of the window so that when the browser is resized it still works.

How can I make the div behave the same both horizontally and vertically?

Javascript Solutions


Solution 1 - Javascript

A scrolling comes from a box with class pre-scrollable

<div class="pre-scrollable"></div>

There's more examples: http://getbootstrap.com/css/#code-block
Wish it helps.

Solution 2 - Javascript

Well one way to do it is set the height of your body to the height that you want your page to be. In this example I did 600px.

Then set your wrapper height to a percentage of the body here I did 70% This will adjust your table so that it does not fill up the whole screen but in stead just takes up a percentage of the specified page height.

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}

http://jsfiddle.net/4NB2N/7/

Update How about a jQuery approach.

$(function() {  
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

$( window ).resize(function() {
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

http://jsfiddle.net/4NB2N/11/

Solution 3 - Javascript

You can use too

style="overflow-y: scroll; height:150px; width: auto;"

It's works for me

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDavid McClellandView Question on Stackoverflow
Solution 1 - JavascriptitsnikolayView Answer on Stackoverflow
Solution 2 - JavascriptTrevorView Answer on Stackoverflow
Solution 3 - JavascriptMarinpietriView Answer on Stackoverflow