How to enable overflow scrolling within a Semantic Ui Grid?
19,798
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>
Author by
Aaron Case
Updated on June 18, 2022Comments
-
Aaron Case almost 2 years
I don't have enough rep to post images, but here's a link.
http://i.stack.imgur.com/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?
-
Predrag Stojadinović over 2 yearsI did the same and it worked, but then I tried wrapping the long content in a tab and it broke again :(