Scrollbars in Your Text Widget

August 25, 2008

“This is a neat little trick that showed up in the forums (and I can’t find the thread right at the moment or remember who posted it so I can’t give the credit) and I thought it might be a useful thing to let everyone know about.

The following code should work with all themes (although I haven’t tested it in all) and you can use it as a starting point. In the example, I have set a height of 150px so the actual space the list takes up is minimal, but you can change that as needed.

I have overflow set to “auto” which puts the burden on the browser to determine if scroll bars are needed, but most real browsers (Safari, Opera, Firefox) should have no problems. With IE6 and IE7, I don’t know since they are… well… less web savvy than they should be.

<div style="overflow:auto;height:150px;">
<p>First entry and a really long one to see how it handles a long line</p>
<p>Second entry</p>
<p>Third entry</p>
<p>Fourth entry</p>
<p>Fifth entry</p>
<p>Sixth entry</p>
<p>Seventh entry</p></div>

By putting the entries in nested (inside the div) “p” tags, it will automatically put a blank line between entries.  If you do not want a blank line, just use <br /> at the end of each line and do away with the “p” tags. You can also use “overflow:scroll;” but this will also put a horizontal scroll bar at the bottom of the widget (whether it is needed or not) which doesn’t look as clean.” via