Menu
I want to create a scrollable div tag with a fixed height that gets a vertical scroll bar. I'm trying to get this to work in chrome.
This is my CSS:
#designDiv { width:249px; height:299px; background-color:Gray; overflow-y: scroll; max-width:230px; max-height:100px; } It does show the vertical scroll bar but the problem is during the run-time when the user adds some content to the #designDiv. It does not scroll and the #designDiv begins to expand vertically.
How do I create a scrollable div tag vertically for chrome?
472
In HTML, there is a division container - or <div></div> - that can encapsulate HTML data and elements. This data can then be manipulated using CSS styling and JavaScript. Among other features, you can also add a scrollbar to your div container with CSS.
To fit all the text inside the div, the single-direction scrolling method will be used. You can apply it by placing the overflow-y:scroll in the id growth inside the style tag. Notice the scroll bar on the right side of the div .
We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable. To make it scrollable, we set the overflow CSS property to scroll . Then we set the tr elements in the thead to absolute position so they stay in place.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Well, your code worked for me (running Chrome 5.0.307.9 and Firefox 3.5.8 on Ubuntu 9.10), though I switched
overflow-y: scroll; to
overflow-y: auto; Demo page over at: http://davidrhysthomas.co.uk/so/tableDiv.html.
xhtml below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Div in table</title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <style type="text/css" media="all"> th {border-bottom: 2px solid #ccc; } th,td {padding: 0.5em 1em; margin: 0; border-collapse: collapse; } tr td:first-child {border-right: 2px solid #ccc; } td > div {width: 249px; height: 299px; background-color:Gray; overflow-y: auto; max-width:230px; max-height:100px; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> </script> </head> <body> <div> <table> <thead> <tr><th>This is column one</th><th>This is column two</th><th>This is column three</th> </thead> <tbody> <tr><td>This is row one</td><td>data point 2.1</td><td>data point 3.1</td> <tr><td>This is row two</td><td>data point 2.2</td><td>data point 3.2</td> <tr><td>This is row three</td><td>data point 2.3</td><td>data point 3.3</td> <tr><td>This is row four</td><td><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies mattis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum a accumsan purus. Vivamus semper tempus nisi et convallis. Aliquam pretium rutrum lacus sed auctor. Phasellus viverra elit vel neque lacinia ut dictum mauris aliquet. Etiam elementum iaculis lectus, laoreet tempor ligula aliquet non. Mauris ornare adipiscing feugiat. Vivamus condimentum luctus tortor venenatis fermentum. Maecenas eu risus nec leo vehicula mattis. In nisi nibh, fermentum vitae tincidunt non, mattis eu metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel est purus. Ut accumsan, elit non lacinia porta, nibh magna pretium ligula, sed iaculis metus tortor aliquam urna. Duis commodo tincidunt aliquam. Maecenas in augue ut ligula sodales elementum quis vitae risus. Vivamus mollis blandit magna, eu fringilla velit auctor sed.</p></div></td><td>data point 3.4</td> <tr><td>This is row five</td><td>data point 2.5</td><td>data point 3.5</td> <tr><td>This is row six</td><td>data point 2.6</td><td>data point 3.6</td> <tr><td>This is row seven</td><td>data point 2.7</td><td>data point 3.7</td> </body> </table> </div> </body> </html> 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
