Overflow
The Overflow Management system provides a way to handle layouts that exceed a specified height limit. It automatically hides excess items and provides a visual indicator for hidden content.
Basic Usage
To enable overflow management on a list, add the data-list-limit="true"
attribute. Specify a custom maximum height of the container using data-list-max-height
expressed in pixel values.
<div class="column"
data-list-limit="true"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Items go here -->
</div>
Configuration Options
The overflow management system can be customized using various data attributes to control its behavior.
Height Limit
Use data-list-max-height
to set a custom maximum height (in pixels).
If not specified, it defaults to "auto" which automatically calculates the available height based on the container's dimensions.
Hidden Count Indicator
Set data-list-hidden-count="true"
to display
an "And X more" message showing how many items are hidden.
Multiple Columns
Use data-list-max-columns
to automatically
wrap items across multiple columns when necessary. If not specified, it defaults to 1 column.
Automatic Multi-Column Layout
When content exceeds the available height, the system can automatically distribute items across multiple columns
to make better use of horizontal space. Use data-list-max-columns
to specify the maximum number of columns.
<div class="column"
data-list-limit="true"
data-list-max-height="auto"
data-list-max-columns="2"
data-list-hidden-count="true">
<!-- Items go here -->
</div>
Fixed Height Limit
You can set a specific maximum height in pixels using data-list-max-height
with a numeric value. This is useful when you need precise control over the container height regardless of the available space.
<div class="column"
data-list-limit="true"
data-list-max-height="200"
data-list-hidden-count="true">
<!-- Items go here -->
</div>
Advanced Usage
Multiple column lists can be arranged vertically using the layout system. Each list maintains its own overflow management while sharing the available vertical space within the container.
<div class="layout layout--col">
<!-- First group of columns -->
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Items for first column -->
</div>
<div class="column"
data-list-limit="true"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Items for second column -->
</div>
</div>
<!-- Second group of columns -->
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Items for third column -->
</div>
<div class="column"
data-list-limit="true"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Items for fourth column -->
</div>
</div>
</div>
Group Headers
When displaying grouped content in multiple columns, you can use the group-header
class to mark elements that separate groups or sections.
This ensures that group headers are never left alone at the bottom of a column, and when possible, the entire group (header + items)
will be kept together in the same column.
Groups with Sufficient Space
When there's enough space and the data-list-max-columns
allows it,
each group can occupy its own column for optimal visual organization. This creates a clean, well-structured layout where
related items are naturally grouped together.
<div class="column"
data-list-limit="true"
data-list-max-columns="3"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Group 1 -->
<span class="label label--medium group-header">Today</span>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<!-- Group 2 -->
<span class="label label--medium group-header">Tomorrow</span>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<!-- Group 3 -->
<span class="label label--medium group-header">This Week</span>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
Groups with Content Overflow
When there are too many items to fit all groups in their own columns, the content flows naturally from left to right, filling columns sequentially. The system still prevents orphaned headers and tries to keep groups together when possible, but will split groups across columns when necessary to maximize space usage.
<div class="column"
data-list-limit="true"
data-list-max-columns="3"
data-list-max-height="auto"
data-list-hidden-count="true">
<!-- Group 1 with many items -->
<span class="label label--medium group-header">Today</span>
<div class="item"><!-- Today's items --></div>
<!-- ... more items ... -->
<!-- Group 2 -->
<span class="label label--medium group-header">Tomorrow</span>
<div class="item"><!-- Tomorrow's items --></div>
<!-- ... more items ... -->
<!-- Group 3 -->
<span class="label label--medium group-header">This Week</span>
<div class="item"><!-- This week's items --></div>
<!-- ... more items ... -->
</div>
How Group Headers Work:
- Elements with the
group-header
class will never be left as the last item in a column - When a group header would be at the bottom of a column, the system attempts to move the entire group (header + all following items until the next group header) to the next column
- If the entire group doesn't fit in the next column, only the header is moved to prevent orphaned headers
- This ensures better visual hierarchy and readability across columns