Skip to main content
UCF Libraries Home

LibGuides Tips & Tricks for Librarians: Scrolling Boxes

This guide is intended for the authors of libguides, not the general users of the content.

Setting up a box to scroll

From The SpringShare Lounge:

Question: I'd like to be able to scroll within a content box. What I'm trying to do is have several "news" boxes on a page, but rather than the boxes just getting bigger and bigger as more text is added, I'd like them to stay the same size and have users be able to scroll down to older items. I tried using textarea boxes but you can't have links in them. I'm using the rich text type of box, would another one work better?

Reply: A rich text box is actually the correct way to go for this, but you will need to be able to use a little HTML knowledge to add scrolling within a box.

What you want to do is open the editor and switch over the HTML view (or plain text mode) and then wrap your existing content in a DIV element by adding the following line at the top of the content, replacing {leftbracket} with < and {rightbracket} with >:

{leftbracket}div style="height: 500px; overflow: auto;"{rightbracket}

and the following line after the content:

{leftbracket}/div{rightbracket}

You can adjust the height value as needed (500px) to change the height of the scrollable area, if you want to make more or less content visible without scrolling.

Example results