i have fixed width elements inside div , need force elements displayed on single line horizontal scroll bar 'grid-content'. have tried many things stuck. here fiddle - https://jsfiddle.net/29pobkzf/
here css , html
.grid-container { width: 100%; margin-top: 20px; overflow: auto; } .grid-content { width: 100%; height: 400px; float: left; } .grid-content .grid-row { width: 100%; overflow-x:scroll; border-right: 1px solid #ccc; } .grid-content .grid-row .grid-column { border: 1px solid #cccccc; display: inline-block; border-top: 0; border-right: 0; padding: 10px; height: 60px; width: 400px; }
<div class='grid-container'> <div class="grid-content"> <div class='grid-row'> <div class='grid-column'>a1</div> <div class='grid-column'>a2</div> <div class='grid-column'>a3</div> <div class='grid-column'>a4</div> </div> </div> </div>
my intention grid-content have scrollbar , contents occupy single line/horizontally aligned. problem facing elements a3 , a4 getting rendered below a1 , a2.
this because .grid-column
set display: inline-block;
, wrap onto new line default. behaviour can changed by:
- adding
white-space: nowrap;
.grid-content .grid-row
you may want remove white space between .grid-column
elements either writing them out in 1 line in html (as in example below) or putting comments in between them. stop white space adding gaps between each .grid-column
element in resultant html.
.grid-container { margin-top: 20px; width: 100%; } .grid-content { float: left; height: 400px; width: 100%; } .grid-content .grid-row { border-right: 1px solid #ccc; overflow-x: scroll; width: 100%; white-space: nowrap; } .grid-content .grid-row .grid-column { border: 1px solid #cccccc; border-right: 0; border-top: 0; display: inline-block; height: 60px; padding: 10px; width: 400px; }
<div class='grid-container'> <div class="grid-content"> <div class='grid-row'> <div class='grid-column'>a1</div><div class='grid-column'>a2</div><div class='grid-column'>a3</div><div class='grid-column'>a4</div> </div> </div> </div>
Comments
Post a Comment