Responsive wrapper

View Source

A class that provides horizontal scrolling around it’s inner contents when overflow occurs.

Install

npm install seed-responsive-wrapper --save

Dependencies

Example

A horizontal scrollbar will automatically appear if content within a .o-responsive-wrapper is wider than it’s parent container.

# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="o-responsive-wrapper">
  <table class="c-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="o-responsive-wrapper">...</div>

Configurations

Below are the default Sass configuration variables for seed-responsive-wrapper. The variables can be found in the pack’s _config.scss file.

seed-responsive-wrapper/_config.scss
$seed-reset-enable-normalize: true !default;
$seed-reset-enable-print: true !default;
$seed-reset-enable-reboot: true !default;
↑Back to top
© Help Scout 2024