Responsive wrapper

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">
  ...
</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;