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.

1
Team MeetingWeekly team sync-up
9:00 AM - 10:00 AMConfirmed
2
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
4
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
1
Team MeetingWeekly team sync-up
9:00 AM - 10:00 AMConfirmed
2
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
4
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
3
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
3
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
Overflow Management With Hidden Count 
<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.

1
Team MeetingWeekly team sync-up
9:00 AM - 10:00 AMConfirmed
2
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
4
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
5
Database BackupPerform weekly database maintenance
6:00 PM - 7:00 PMAutomated
6
Security AuditMonthly security assessment
10:00 AM - 12:00 PMCritical
7
Performance ReviewQuarterly team performance evaluation
1:00 PM - 2:30 PMScheduled
8
System UpdateApply latest security patches
11:00 PM - 12:00 AMMaintenance
9
Training SessionNew employee onboarding
9:30 AM - 11:30 AMRequired
10
Budget PlanningQ4 financial planning meeting
3:00 PM - 5:00 PMPlanning
11
Vendor MeetingQuarterly vendor review
2:00 PM - 3:00 PMBusiness
12
Documentation UpdateUpdate project documentation
4:00 PM - 5:30 PMDocumentation
13
Infrastructure CheckMonitor server health and performance
8:00 AM - 9:00 AMMonitoring
14
Coffee ChatInformal team bonding session
10:15 AM - 10:45 AMSocial
15
API TestingValidate new API endpoints
11:00 AM - 12:30 PMTesting
16
Customer Feedback ReviewAnalyze user feedback and feature requests
1:30 PM - 2:30 PMResearch
17
Sprint PlanningPlan upcoming development sprint
3:00 PM - 4:00 PMPlanning
18
Deployment PipelineSet up automated deployment process
4:30 PM - 6:00 PMDevOps
19
Learning SessionTechnology deep-dive presentation
5:00 PM - 6:00 PMEducation
20
RetrospectiveTeam reflection on past sprint
6:00 PM - 7:00 PMReview
21
Mobile App TestingCross-platform compatibility testing
7:30 PM - 8:30 PMQA
22
Data AnalyticsGenerate monthly usage reports
9:00 PM - 10:00 PMAnalytics
23
Emergency ResponseOn-call incident response protocol
12:00 AM - 12:00 AMEmergency
24
TestingUnit and integration testing
4:00 PM - 5:30 PMConfirmed
Multi-Column Layout Max 2 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.

1
Team MeetingWeekly team sync-up
9:00 AM - 10:00 AMConfirmed
2
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
4
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
5
Database BackupPerform weekly database maintenance
6:00 PM - 7:00 PMAutomated
6
Security AuditMonthly security assessment
10:00 AM - 12:00 PMCritical
7
Performance ReviewQuarterly team performance evaluation
1:00 PM - 2:30 PMScheduled
8
System UpdateApply latest security patches
11:00 PM - 12:00 AMMaintenance
Fixed Height Limit 200px Maximum 
<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.

1
Morning StandupDaily team synchronization
9:00 AM - 9:30 AMDaily
2
Sprint PlanningPlan upcoming development sprint
10:30 AM - 12:00 PMPlanning
3
Code ReviewReview pending pull requests
2:00 PM - 3:00 PMReview
4
Team RetrospectiveReflect on sprint outcomes
4:00 PM - 5:00 PMRetrospective
5
Architecture ReviewTechnical design discussion
3:30 PM - 4:30 PMTechnical
6
Client DemoShowcase new features to stakeholders
1:00 PM - 2:00 PMDemo
1
Database MigrationUpdate production schema
11:00 PM - 12:00 AMOff-hours
2
Security PatchApply latest security updates
11:00 PM - 11:30 PMSecurity
3
Load TestingPerformance validation under load
6:00 PM - 7:00 PMTesting
4
Backup VerificationValidate backup integrity
12:00 AM - 12:30 AMMaintenance
5
Log AnalysisReview system logs for anomalies
8:00 AM - 9:00 AMMonitoring
6
Monitoring SetupConfigure new alerting rules
5:00 PM - 6:00 PMConfiguration
1
Budget ReviewQ4 financial planning session
10:00 AM - 11:00 AMFinancial
2
Vendor AssessmentEvaluate third-party service providers
2:30 PM - 3:30 PMProcurement
3
Contract RenewalNegotiate terms with key partners
4:00 PM - 5:00 PMLegal
4
Market AnalysisResearch competitive landscape
1:00 PM - 2:00 PMResearch
5
Compliance AuditAnnual regulatory compliance check
9:00 AM - 10:00 AMCompliance
1
Employee TrainingNew technology workshop
11:00 AM - 12:00 PMTraining
2
Performance ReviewsAnnual employee evaluations
3:00 PM - 4:00 PMHR
3
Team BuildingQuarterly team bonding activity
5:00 PM - 7:00 PMSocial
4
Office RenovationWorkspace improvement planning
12:00 PM - 1:00 PMFacilities
5
Safety DrillEmergency evacuation practice
2:00 PM - 2:30 PMSafety
Advanced Layout Vertical Column Groups 
<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.

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Status ReportWeekly progress summary
4:00 PM - 4:30 PMReporting
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
Group Headers Each Group in Own Column 
<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. When a group spills over to a new column, a duplicate header with the label--gray-out class is automatically added to the beginning of the new column to maintain visual context.

Today
1
Morning MeetingTeam sync and updates
9:00 AM - 9:30 AMDaily
2
Code ReviewReview feature branch
10:30 AM - 11:30 AMReview
3
Lunch BreakTeam lunch at downtown
12:30 PM - 1:30 PMBreak
4
Client CallWeekly check-in with stakeholders
2:00 PM - 3:00 PMClient
5
Bug TriagePrioritize reported issues
3:30 PM - 4:30 PMBugs
6
Documentation UpdateUpdate API documentation
4:30 PM - 5:30 PMDocs
7
End of Day SyncReview progress and blockers
5:30 PM - 6:00 PMSync
Tomorrow
1
Sprint PlanningPlan next two weeks
10:00 AM - 12:00 PMPlanning
2
Client DemoShow new features
2:00 PM - 3:00 PMDemo
3
Architecture ReviewDiscuss system design
4:00 PM - 5:00 PMTechnical
4
Stakeholder MeetingProject milestone review
9:00 AM - 10:00 AMStakeholder
5
QA TestingRegression test suite
1:00 PM - 2:00 PMQA
6
Design WorkshopUI/UX design session
3:00 PM - 4:00 PMDesign
7
Technical Debt ReviewAssess code quality issues
5:00 PM - 6:00 PMTechnical
This Week
1
Security AuditQuarterly security review
WednesdaySecurity
2
Team RetrospectiveSprint reflection
FridayRetrospective
3
Performance TestingLoad test new features
ThursdayTesting
4
Database OptimizationQuery performance tuning
WednesdayDatabase
5
Code CleanupRefactor legacy modules
FridayRefactor
6
Deployment PrepPrepare release candidate
FridayDeploy
7
Knowledge TransferOnboard new team member
ThursdayTraining
8
Sprint ReviewDemo completed work
FridayReview
9
API DocumentationUpdate endpoint specifications
WednesdayDocumentation
10
User TestingConduct usability studies
ThursdayUX Research
11
Infrastructure ReviewAssess server capacity needs
MondayInfrastructure
12
Bug PrioritizationTriage reported issues
TuesdayBug Triage
13
Feature PlanningRoadmap discussion for Q2
ThursdayPlanning
14
Third-party IntegrationImplement payment gateway
WednesdayIntegration
15
Accessibility AuditWCAG compliance review
FridayAccessibility
16
Monitoring SetupConfigure alerting systems
TuesdayDevOps
17
Data MigrationMove legacy customer data
WeekendMigration
18
License RenewalUpdate software licenses
MondayLegal
19
Team TrainingNew framework workshop
FridayEducation
20
Release NotesDocument feature changes
ThursdayCommunication
Group Headers Smart Group Distribution 
<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
  • When a group spills over to a new column, a duplicate header with the label--gray-out class is automatically added to the beginning of the new column
  • This ensures better visual hierarchy and readability across columns

Responsive Max Columns

The maximum number of columns can be adjusted based on both screen size and UI scale. This allows for fine-tuned control over how content flows across different device configurations. Scale modifiers must always be combined with size breakpoints - standalone scale attributes are not supported.

Small Scale Configuration

This example shows conservative column counts optimized for small UI scales. As screen size increases, the number of columns grows gradually to maintain readability at smaller scale factors.

1
Team MeetingWeekly team sync-up
9:00 AM - 10:00 AMConfirmed
2
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
4
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
5
Database BackupPerform weekly database maintenance
6:00 PM - 7:00 PMAutomated
6
Security AuditMonthly security assessment
10:00 AM - 12:00 PMCritical
7
Performance ReviewQuarterly team performance evaluation
1:00 PM - 2:30 PMScheduled
8
System UpdateApply latest security patches
11:00 PM - 12:00 AMMaintenance
9
Training SessionNew employee onboarding
9:30 AM - 11:30 AMRequired
10
Budget PlanningQ4 financial planning meeting
3:00 PM - 5:00 PMPlanning
11
Vendor MeetingQuarterly vendor review
2:00 PM - 3:00 PMBusiness
12
Documentation UpdateUpdate project documentation
4:00 PM - 5:30 PMDocumentation
13
Infrastructure CheckMonitor server health and performance
8:00 AM - 9:00 AMMonitoring
14
Coffee ChatInformal team bonding session
10:15 AM - 10:45 AMSocial
15
API TestingValidate new API endpoints
11:00 AM - 12:30 PMTesting
16
Customer Feedback ReviewAnalyze user feedback and feature requests
1:30 PM - 2:30 PMResearch
17
Sprint PlanningPlan upcoming development sprint
3:00 PM - 4:00 PMPlanning
18
Deployment PipelineSet up automated deployment process
4:30 PM - 6:00 PMDevOps
19
Learning SessionTechnology deep-dive presentation
5:00 PM - 6:00 PMEducation
20
RetrospectiveTeam reflection on past sprint
6:00 PM - 7:00 PMReview
21
Mobile App TestingCross-platform compatibility testing
7:30 PM - 8:30 PMQA
22
Data AnalyticsGenerate monthly usage reports
9:00 PM - 10:00 PMAnalytics
23
Emergency ResponseOn-call incident response protocol
12:00 AM - 12:00 AMEmergency
24
TestingUnit and integration testing
4:00 PM - 5:30 PMConfirmed
Responsive Columns Small Scale Config 
<div class="screen scale--small">
  <div class="column"
       data-list-limit="true"
       data-list-max-height="auto"
       data-list-max-columns="1"
       data-list-max-columns-sm="1"
       data-list-max-columns-md="2" 
       data-list-max-columns-lg="3"
       data-list-max-columns-sm-scale-small="1"
       data-list-max-columns-md-scale-small="1"
       data-list-max-columns-lg-scale-small="2">
    <!-- Items go here -->
  </div>
</div>

<!-- Effective column counts:
     sm + small scale: 1 column
     md + small scale: 1 column  
     lg + small scale: 2 columns -->

Large Scale Configuration

This example shows aggressive column counts optimized for large UI scales. The larger scale factor allows for more columns at each breakpoint, making better use of available horizontal space when UI elements are larger.

1
Team MeetingWeekly team sync-up
9:00 AM - 10:00 AMConfirmed
2
Client PresentationQuarterly review with XYZ Corp
2:00 PM - 3:30 PMTentative
3
Project DeadlineSubmit final deliverables for Project Alpha
11:59 PMImportant
4
Code ReviewReview pull requests for Project Beta
3:30 PM - 4:30 PMHigh Priority
5
Database BackupPerform weekly database maintenance
6:00 PM - 7:00 PMAutomated
6
Security AuditMonthly security assessment
10:00 AM - 12:00 PMCritical
7
Performance ReviewQuarterly team performance evaluation
1:00 PM - 2:30 PMScheduled
8
System UpdateApply latest security patches
11:00 PM - 12:00 AMMaintenance
9
Training SessionNew employee onboarding
9:30 AM - 11:30 AMRequired
10
Budget PlanningQ4 financial planning meeting
3:00 PM - 5:00 PMPlanning
11
Vendor MeetingQuarterly vendor review
2:00 PM - 3:00 PMBusiness
12
Documentation UpdateUpdate project documentation
4:00 PM - 5:30 PMDocumentation
13
Infrastructure CheckMonitor server health and performance
8:00 AM - 9:00 AMMonitoring
14
Coffee ChatInformal team bonding session
10:15 AM - 10:45 AMSocial
15
API TestingValidate new API endpoints
11:00 AM - 12:30 PMTesting
16
Customer Feedback ReviewAnalyze user feedback and feature requests
1:30 PM - 2:30 PMResearch
17
Sprint PlanningPlan upcoming development sprint
3:00 PM - 4:00 PMPlanning
18
Deployment PipelineSet up automated deployment process
4:30 PM - 6:00 PMDevOps
19
Learning SessionTechnology deep-dive presentation
5:00 PM - 6:00 PMEducation
20
RetrospectiveTeam reflection on past sprint
6:00 PM - 7:00 PMReview
21
Mobile App TestingCross-platform compatibility testing
7:30 PM - 8:30 PMQA
22
Data AnalyticsGenerate monthly usage reports
9:00 PM - 10:00 PMAnalytics
23
Emergency ResponseOn-call incident response protocol
12:00 AM - 12:00 AMEmergency
24
TestingUnit and integration testing
4:00 PM - 5:30 PMConfirmed
Responsive Columns Large Scale Config 
<div class="screen scale--large">
  <div class="column"
       data-list-limit="true"
       data-list-max-height="auto"
       data-list-max-columns="1"
       data-list-max-columns-sm="1"
       data-list-max-columns-md="2"
       data-list-max-columns-lg="3"
       data-list-max-columns-sm-scale-large="2"
       data-list-max-columns-md-scale-large="4"
       data-list-max-columns-lg-scale-large="5">
    <!-- Items go here -->
  </div>
</div>

<!-- Effective column counts:
     sm + large scale: 2 columns
     md + large scale: 4 columns
     lg + large scale: 5 columns -->

How Responsive Max Columns Work:

  • Size-only attributes set base column counts for each breakpoint (e.g., data-list-max-columns-md="2")
  • Size + scale combinations override the base counts when both conditions match (e.g., data-list-max-columns-md-scale-large="4")
  • Scale-only attributes are not supported - scale must always be paired with a size breakpoint
  • The system follows CSS-like specificity: combined size+scale rules take precedence over size-only rules
  • Users can test different screen sizes in the preview to see how column counts adapt based on the current scale setting

Progress

Display progress bars in different styles

Previous

Format Value

Format numbers and values with consistent styling

Next
Framework Index