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?
It can be done by the following approach: Approach: Making all the div element in next line using position: absolute; property (arrange all div column-wise). Adding the scroll bar to all the div element using overflow-y: scroll; property.
Instead put style on the div with class panel-body as overflow-y:scroll; height:200px; see demo below in answers.
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
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.
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