Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

How can I create a scrolling box?

I want boxes I have long lists of links in to have a scrolling bar so they don't take up such a large footprint on the page.
Last Updated: Feb 27, 2012  |  12847 Views
Topics: Boxes, CSS, Links

Was this helpful? 12   13
A

Answer

You can turn any box into a scrolling box...how you do it varies a little depending on the type of box you use and whether you want just 1 box to scroll or all boxes of a certain type:

One Rich Text Box Scrolls

  1. Add a Rich Text box to your page.
  2. Click add text add your content to the box.
  3. Click Save Changes.
  4. Now you're going to add the HTML to add scrolling.
    Click the Plain-Text Editor tab at the top of the box.
  5. You're going to wrap the text in a DIV element by adding the following line before all of the content.
    Adjust the 500px to whatever height you want:
    <div style="height: 500px; overflow: auto;">
  6. Then scroll down to the bottom of your content and add the following line at the end:
    </div>
  7. Then click Save and Close.

One of Any Other Box Type Scrolls

The other box types work a little differently than the Rich Text box...so there are different instructions. :)

  1. Add the box to your page & add whatever content you want.
    Click Save and Close
  2. Get the Box ID by hovering over the edit link in the upper right corner of the box.
    Write this number down.
  3. Click the edit text link toward the top of the box.
  4. Click the Plain Text Editor tab at the top of the box.
  5. Add the following CSS, replacing boxID with the ID you wrote down in step 2 and 200px with whatever height you want.
    <style>
    #boxattboxID { height: 200px; overflow: auto; }
    </style>
  6. Click Save and Close

All Boxes of a Content Type Scroll

LibGuides: You can only do this system-wide or on a specific page.

CampusGuides: You can choose to do this system-wide, group-wide, throughout a single guide, or on a single page.

General instructions with screen shots can be found in the Customizing Boxes guides, linked below.

  1. Find the class for the box type you want to have scroll from the list on the "Customizing Boxes" guide (links below).
  2. Here's the CSS you'll need. Copy it...
    When you paste it later, change boxnumber with the box number you wrote down in step 1.
    Feel free to change the 200px to whatever height you want for the box.
    <style>
    .innerbox_boxnumber { height: 200px; overflow: auto; }
    </style> 
  3. Go to the place where you want to add the code. 
    • System Wide:
      • Go to Admin Stuff > Look & Feel
      • On the System Wide page, scroll to the Custom JS/CSS Code box.
      • Add the CSS to the Custom JS/CSS Code box and click Save Custom HEAD.
    • Group Wide:
      • Go to Admin Stuff > Groups.
      • Click the edit icon for the group.
      • Click the Group Look & Feel tab and scroll down to the Custom JS/CSS Code box.
      • Add the CSS to the Custom JS/CSS Code box and click Save Custom HEAD.
    • Single Guide:
      • Go to Guide Look & Feel > Custom JS & CSS Code.
      • Add the CSS to the box and click Save.
    • Single Page:
      • Click edit text in any box on the page.
      • Click the Plain Text Editor tab at the top of the box.
      • Add the CSS to the Plain Text Editor and click Save and Close.
Answered by Anna BurkeBookmark and Share

Other Answers / Comments (3)

  1. Hi,

    I've got a quick question I hope you can help me with - I've added a scrolling box to my guide and all works wonderfully.

    The only problem is that when it is displayed on an iPad (prob. same for iPhone) there is no graphic indication that it is a scrolling box - you can scroll if you touch and swipe on the area, but you'd have to know that it is a scrolling box.

    Is there any way of making the scroll bar visible for iPads?

    Cheers,
    Rebecca
    by Rebecca on Apr 22, 2013.
  2. Hi Rebecca - We're looking into this and will get back to you shortly. - Ken
    by Ken Liss on Apr 23, 2013.
  3. Hi Rebecca - Unfortunately, this seems to be a quirk of the iOS (and apparently on Macs, too - my colleague has a brand new iMac and she reported the same problem). Frustratingly, I don't see any way to fix this - I've checked Apple's support site, and they acknowledge the issue, but don't seem to think it's a problem:

    http://support.apple.com/kb/ht1484

    I guess my advice would be to not have the box scroll and perhaps to move it elsewhere on that page.

    I'm sorry I couldn't be of more help! :(

    - Ken
    by Ken Liss on Apr 23, 2013.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.

Support:

Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
View All Topics

Related content from Springshare v1 Help