Overflow Management

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.

1

Team Meeting Weekly team sync-up

9:00 AM - 10:00 AM Confirmed

2

Client Presentation Quarterly review with XYZ Corp

2:00 PM - 3:30 PM Tentative

3

Project Deadline Submit final deliverables for Project Alpha

11:59 PM Important

4

Code Review Review pull requests for Project Beta

3:30 PM - 4:30 PM High Priority

3

Project Deadline Submit final deliverables for Project Alpha

11:59 PM Important

And 6 more

1

Team Meeting Weekly team sync-up

9:00 AM - 10:00 AM Confirmed

2

Client Presentation Quarterly review with XYZ Corp

2:00 PM - 3:30 PM Tentative

3

Project Deadline Submit final deliverables for Project Alpha

11:59 PM Important

Overflow Management With Hidden Count

<div class="column" 
     data-list-limit="true" 
     data-list-max-height="340" 
     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 320px.

Hidden Count Indicator

Set data-list-hidden-count="true" to display an "And X more" message showing how many items are hidden.