CODEWITHSUNDEEP
csstwitter-bootstrapscrollbarhorizontal-scrolling
London Smith
London Smith

Reputation: 1659

Can't get a scrollable div in a div table / cell bootstrap structure

I use Bootstrap 4 and I can't make a scrollable div inside a structure where 2 divs are side by side, the right div has a fixed width and the second div to the right take all the left space responsively.

The working code:

<div class="d-table mt-3" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success">
      Hello world
   </div>
</div>

The scrollable div working code:

  <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
  </div>

But If I place the scrollable div inside the Hello world d-table-cell div, it just does not work. overflow-x: auto has no effect.

I have done a jsfiddle (just remove display:none !important; from the second d-table div): https://jsfiddle.net/LondonUK371/zdcjfmv6/8/

How to do that, a scrollable div where "Hello world" is? It can be either with or without Bootstrap.

Upvotes: 1

Views: 34

Answers (2)

London Smith
London Smith

Reputation: 1659

Thanks to the WizardCoder solution I have noticed by chance that we can put the table-layout:fixed inside the table cell div where we want the long div with a scrollbar:

     <div class="d-table" style="table-layout: fixed;width:100%;">  
        <div class="bg-warning overflow-auto" style="white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
...
        </div>
      </div>

https://jsfiddle.net/LondonUK371/a6cm9xs5/

This can be useful if we can't figure out why the table-layout:fixed at the top d-table div is not enough.

Upvotes: 0

WizardCoder
WizardCoder

Reputation: 3461

Add the style table-layout: fixed to the div with the .d-table class. This will prevent the table cell effecting the overall width of the table.

https://jsfiddle.net/WizardCoder/6gmryqca/6/

Table Layout Fixed
Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells

CSS

.cell {
  width:300px;
  background: red;
  height: 100px;
}

.table-layout-fixed {
  table-layout: fixed;
}

HTML

<div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
</div>

<div class="d-table mt-3" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success">
      Hello world
   </div>
</div>

<div class="d-table mt-3 table-layout-fixed" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cel bg-success">
      <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
      </div>
  </div>
</div>

Upvotes: 1

Related Questions