CODEWITHSUNDEEP
cssbootstrap-4scrollrow
Michael Clovis
Michael Clovis

Reputation: 53

How do you make bootstrap columns in a row scroll instead of wrap

To be clear, I wish to create rows that each have columns totaling more than 12 in such a way that the columns become a scrollable row. To illustrate what I have tried, here is an example. The html is:

<div class="container-fluid">
    <div class="row">
      <div class="col-3">
        This is
      </div>
      <div class="col-9">
        the first row
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        This is
      </div>
      <div class="col-6">
        the second row
      </div>
    </div>
    <!-- This should scroll -->
    <div class="row schedule">
      <!-- This is the header row -->
      <div class="row">
        <div class="col-3">
          Employee Name:
        </div>
        <div class="col-3">
          First Day:
        </div>
        <div class="col-3">
          Second Day:
        </div>
        <div class="col-3">
          Third Day:
        </div>
        <div class="col-3">
          Fourth Day:
        </div>
        <div class="col-3">
          Fifth Day:
        </div>
        <div class="col-3">
          Sixth Day:
        </div>
        <div class="col-3">
          Seventh Day:
        </div>
        <div class="col-3">
          Totals:
        </div>
      </div>

    </div>

  </div>

With the css being simply:

  .schedule{
          overflow: auto;
          white-space: nowrap;
          -webkit-overflow-scrolling: auto;

          background-color: lightblue;
      }

I appreciate any help in advance,

Mike

Upvotes: 0

Views: 731

Answers (2)

Ahmad Tahhan
Ahmad Tahhan

Reputation: 125

Try this:

<div class="container-fluid">
    <div class="row">
      <div class="col-3">
        This is
      </div>
      <div class="col-9">
        the first row
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        This is
      </div>
      <div class="col-6">
        the second row
      </div>
    </div>
    <!-- This should scroll -->
    <div class="row schedule">
      <!-- This is the header row -->
      <div class="row">
        <div class="col-3">
          Employee Name:
        </div>
        <div class="col-3">
          First Day:
        </div>
        <div class="col-3">
          Second Day:
        </div>
        <div class="col-3">
          Third Day:
        </div>
        <div class="col-3">
          Fourth Day:
        </div>
        <div class="col-3">
          Fifth Day:
        </div>
        <div class="col-3">
          Sixth Day:
        </div>
        <div class="col-3">
          Seventh Day:
        </div>
        <div class="col-3">
          Totals:
        </div>
    </div>
    </div>
  </div>

CSS:

.schedule >.row{
    flex-wrap: nowrap!important;
    display: flex;
    flex-direction: row;
    background-color: lightblue;
 }

Upvotes: 0

Michael Clovis
Michael Clovis

Reputation: 53

I have found that if I had flex-nowrap to the row(s) I wish to have scroll that takes care of the issue.

Upvotes: 1

Related Questions