Adding scroll bars to text widgets

Posted by Richard

This is a neat little trick that showed up in the WordPress.com 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.

You may find a time when you want to put a long list of some sort into a text widget in your sidebar, but because of the length, it pushes your other widgets way down the page where your readers have to scroll way down the page in order to get to them. You can add scroll bars to text widgets and then limit the height so this does not happen. (Note that you can add scroll bars to pages and posts too.)

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>

[The original code I had posted above, was put directly into the visual editor, was not meant to be copied and pasted since like with any html document, strange things are brought along for the ride. I tried using the "sourcecode" short code but it took out the opening and closing "p" tags so I have now put it in as "preformatted, which should make it so that you can copy and paste to try it out. Sorry for the problems, I should have done this in the first place.]

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.

This would be one solution for people who have a lot of tags and do not like the 45 tag limit on the tag cloud, but it would be quite a bit of work to keep up. One way to minimize the amount of work would be to alphabetize your tags and then when you write a new post, you can easily check to see if the tags you have used are already in the list or not. One thing to note is that I do not know if there is any limit on the amount of stuff you can put into a text widget or whether having long lists will cause any issues.

:: :: :: :: :: :: :: :: ::