Views Table - How to add a horizontal scroll bar?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
spessex's picture

I'm currently pulling my hair out trying to - with what I thought would be a simple fix - get a horizontal scroll bar to appear within a View's table.

I have a silly example just to see if anyone can help using Firebug or similar, as the production site is not yet available (I could then apply this fix to the real site).

The Views Table appears at http://www.yousayuk.com/page/about-us under the title 'test-3' and just pulls in some random data to demonstrate how the table stretches beyond that which is expected.

To gain access to the site the user is stephen.essex and the password is access.1151

At the moment the whole web browser window scrolls where in fact I only want the actual views table to scroll (horizontally). My final site has about 30+ columns in the view so you can imagine what this looks like ;)

Any help would be greatly appreciated.

Thank you

Stephen

Comments

Use css overflow to bring up horizontal scroll

zyxware's picture

You can use the overflow:scroll CSS property to bring up the horizontal scroll bar after setting width for the relevant div. For the example table this should work.

#block-views-test3-block {
  width: 960px;
  overflow-x: scroll;
}

BTW I think you should be using the issue queue for technical support questions. Please see the group description.

It worked. Thanks so much for

spessex's picture

It worked. Thanks so much for this. Much appreciated.

Noted about correct queue usage :)

Editable table, not showing horizontal scrollbars

KimNauwelaers's picture

I've tried to put the above into my style.css file but there is no scrollbar showing. What do I do wrong?

Views Developers

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: