Horizontal scrolling pages

I recently had to create a view which utilised the horizontal space of the page as opposed to the vertical space. A simple task you’d think – set a width on the container and you can rely on the browser horizontal scrollbar. Oh no…

What if the content is dynamically generated? Then you are not privy to the width of the content as this will change constantly.

This leaves you with a few options.

  1. Use js to calculate the content width in-between content state changes and set the width after (potential for lots of dom hits depending on the amount of state changes and markup depth, not very performant)
  2. Set a huge width on the container so the browser horizontal scrollbar is invoked and hope the page content never exceeds that width (and not care that it looks tacky when the page content is small)
  3. Just use CSS.

As you’ve probably guessed, I went with the latter. After some playing around, the solution was pretty simple. I just set my container to behave as a table, and it’s children to be table cells.

As long as the content is all in one table row, the browser won’t wrap the content, instead just invoking the horizontal scrollbar:

HTML

<div class="wrapper">
  <div class="row">
    <div class="panel">Some content for panel1</div>
    <div class="panel">Some content for panel2</div>
    <div class="panel">Some content for panel3</div>
  </div>
</div>

CSS

.wrapper { display: table; }
 .row { display: table-row; }
  .panel { display: table-cell; white-space: nowrap; }

Here is a working example in case you’re interested 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s