Bootstrap 3 scrollable div for table
JavascriptJqueryCssTwitter BootstrapJavascript 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:
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%;
}
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);
});
Solution 3 - Javascript
You can use too
style="overflow-y: scroll; height:150px; width: auto;"
It's works for me