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.

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: reddit :: furl :: TailRank

28 thoughts on “Adding scroll bars to text widgets

  1. Pingback: Which Widgets are Essential? | one cool site

  2. Pingback: 6 Easy Ways to Feature Older Content « one cool site

  3. @Sergio, no it is not possible to add scroll bars to the recent posts or categories widgets. The scroll bars only work in the text widgets.

    You could make your own categories widget using a text widget (you manually write and update all the code) and have the scrollbar.

    On categories, why not simply edit the widget and change it to show as a pulldown menu? That can’t be done with recent comments though.

  4. @Ian, without seeing the code, I could not be for sure. My suggestion is to build the links in the visual editor, then switch to the HTML tab and copy all of them out and into the text widget.

  5. Hiya tt – hope you’re feeling better these days.

    I tried out the scrolling text widget thing, but it didn’t work. I mean, it did create a scroll, but by inserting links to my favourite posts it simply copied the html code for the link (http://lettershometoyou etc etc) instead of making a link like you so artfully have done in your sidebar. ;-)

    Anything I’ve done wrong?

    cheers,
    ian

  6. I did not get where I am to insert the code.

    Specifically, I want to put the scroll on “Categories” and “Recent Posts” Is this possible ?

    Thanks,

    Sergio

  7. @sensio, you did ask the question, and Vivian posted the answer (with me coming along afterward and repeating what she said. I’ll give you credit for asking the question and thus prompting the volunteers to find the answer. Actually the credit really has to go ygworld.

  8. Thanks can I take responsibility and credit since I asked the question on the forum. Ok it not that serious, but…

    ScrollBars did a lot for my blog, I love them. I definitely recommend scrollbars if you want to use a lot of widgets and dont want to waste a lot of sidebar space

  9. Pingback: Scroll Bar Madness « Teck~Line

  10. Everyone, sorry for the problem. I’ve edited the post and inserted the code “preformatted” so that WP will leave it alone so you should now be able to copy and paste to give it a try. Again, sorry for the problem.

    @wpvstp, thanks for finding the forum thread and posting it here. I agree with you this is a great blog. Timethief has done – and continues to do – an incredible job rounding up good information for bloggers.

  11. Hello Again
    I tried on the same theme as you Richard, becuase I saw you had
    a scroll bar on the side I copied the code in the post because
    i’m not good with HTML and I got the same result no scroll bar
    I’m i missing something by coping the code from the post ?

  12. Thank you for this great informative post
    unfortunately I try’d the code on the –
    digg 3 theme and it didn’t work… :(

Comments are closed.