Horizontale scroll

Voor componenten die breder zijn dan het scherm maar wel horizontaal weergegeven dienen te worden.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de class horizontal-scroll toe om het element over de horizontale as te laten scrollen als de content niet meer binnen de breedte van het scherm past.

Voorbeelden

Basis

Visueel voorbeeld:

Let op: het effect van de horizontale scroll is alleen zichtbaar als de content niet meer binnen de schermbreedte past.

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

HTML-structuur-voorbeeld:

--> 
<div class="horizontal-scroll">
  <-- Content -->
</div>

Tabeltitel op een regel

Visueel voorbeeld:

Om te voorkomen dat de tabeltitels op meerdere regels getoond worden kan de class nowrap toegevoegd worden aan de <thead>.

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead class="nowrap">
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

Tabeltitel en content op een regel

Visueel voorbeeld:

Om te voorkomen dat de tabeltitels en content op meerdere regels getoont worden kan de class nowrap toegevoegd worden aan de omliggende <div> of de <table>.

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set
Lorem Ipsum Dolor set Dolor set Dolor set Dolor set Dolor set

HTML-voorbeeld:

<div class="horizontal-scroll nowrap">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

HTML-structuur-voorbeeld:

--> 
<div class="horizontal-scroll nowrap">
  <table>
    <-- Content -->
  </table>
</div>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Benodigd

  • helpers/horizontal-scroll.scss

Optioneel

  • nowrap.scss

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.