CODEWITHSUNDEEP
csslesssemantic-ui
Aaron Case
Aaron Case

Reputation: 95

How to enable overflow scrolling within a Semantic Ui Grid?

I don't have enough rep to post images, but here's a link.

https://i.sstatic.net/eTp8Q.png

I'm having trouble trying to figure out the proper CSS/LESS to enable sidescrolling here within the Semantic UI framework. There are four columns in this part of the grid, and I need to add four more, but have them hidden off to the right until they are scrolled to, if that makes sense. 

<div class="features ui grid noMargin">
    <div class="four wide column greyOdd">Stuff here</div>
    <div class="four wide column greyEven">More stuff</div>
    <div class="four wide column greyOdd">Calls n stuff</div>
    <div class="four wide column greyEven">Testing look</div>
</div>

How would I add more columns here without them going to the next row?

Upvotes: 8

Views: 21288

Answers (2)

scipilot
scipilot

Reputation: 7447

Since 3rd July 2017 there is a "scrolling content" style available. See closing note in https://github.com/Semantic-Org/Semantic-UI/issues/4335

This makes the entire grid content scroll on overflow. For me this scrolled vertically as I have too much content in single-row columns.

<div class="ui grid scrolling content">

Modal example:

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>

Upvotes: 1

Bass Jobsen
Bass Jobsen

Reputation: 49044

Grids elements of Semantic UI got display: inline-block, so you can set white-space:nowrap to prevent that elements wrap in a row:

<div class="features ui grid noMargin" style="overflow-y:auto;white-space:nowrap;">
    <div class="four wide column greyOdd">Stuff here</div>
    <div class="four wide column greyEven">More stuff</div>
    <div class="four wide column greyOdd">Calls n stuff</div>
    <div class="four wide column greyEven">Testing look</div>
    <div class="four wide column greyOdd">Stuff here</div>
    <div class="four wide column greyEven">More stuff</div>
    <div class="four wide column greyOdd">Calls n stuff</div>
    <div class="four wide column greyEven">Testing look</div>
</div>

Upvotes: 9

Related Questions