Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Flex Layout

The flex layout can be used with the <tc:flexLayout/> tag. The two most important attributes are columns and rows. If both attributes are set, only rows has an effect.

Tag Library Documentation

Basics

If no attributes set, the behavior of the flex layout is like a flow layout.

Columns

In this example, the columns attribute is set to '200px auto 1fr 2fr 10rem'. This means:

  • Column 1: Width is always at 200px.
  • Column 2: Width is always the width of the button.
  • Column 3: The left space is filled with the remaining buttons in a ratio of 1:3 for this button.
  • Column 4: The left space is filled with the remaining buttons in a ratio of 2:3 for this button.
  • Column 5: Width is always set to 10rem.

Rows

The rows attribute is set to '100px auto 1fr 2fr 1fr'. Also, the height of the flex layout is '400px'. This means:

  • Row 1: Height is always at 100px.
  • Row 2: Height is always the height of the button.
  • The left space is filled with the remaining buttons. The fourth button is twice the size than button three and five.

Cascade

You can also put a flex layout within a flex layout. In this case the second row is another flex layout.
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.