CODEWITHSUNDEEP
zurb-foundation
Kousha
Kousha

Reputation: 36219

Zurb Foundation: Want horizontal scrollbar

I have the following code:

<div class="row">
    <div class="large-12 columns">
        <div class="item">ITEMS GO HERE</div> 
        <div class="item">ITEMS GO HERE</div>
        ... many .item here ...
    </div>
</div>

Each .item would have a fixed width, say 150px. I want the div large-12 to be scrollable if there are more .item that it can fit within the current screen. How can I do that? Currently, if I add too many .item, then they go to the next line!

Thanks

Upvotes: 0

Views: 2738

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62801

You'll need to add an overflow-x:scroll; and white-space:nowrap; to the parent container. And a display:inline-block; to the .items.

Here's a working demo.

Upvotes: 3

Related Questions