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

Grid Layout

The <tc:gridLayout> has a dynamic history.

In Tobago 1 and 2 the <tc:gridLayout> was implemented server side. This implementation was very powerful in layout, but has disadvantage in responsiveness.

For Tobago 3 we have alternative layout managers like <tc:flexLayout> and <tc:segmentLayout>. The <tc:gridLayout> was implemented with the help of JavaScript to have a working and quite compatible version, but it was not recommended to use.

The Tobago 4 implementation of the <tc:gridLayout> was implemented in CSS and usable with all modern browsers and the Internet Explorer 11.

Grid Layout for Personal Information Form

<tc:box label="Personal Information"> <tc:gridLayout columns="100px 1fr 100px 2fr" rows="auto auto auto auto auto 1fr"> <tc:style minHeight="600px"/> <tc:selectOneChoice label="Salutation" labelLayout="gridLeft"> <f:selectItem itemLabel="none"/> <f:selectItem itemLabel="Mr."/> <f:selectItem itemLabel="Mrs."/> </tc:selectOneChoice> <tc:panel> <tc:gridLayoutConstraint columnSpan="2"/> </tc:panel> <tc:in label="First Name" labelLayout="gridLeft"/> <tc:in label="Last Name" labelLayout="gridLeft"/> <tc:in label="c/o" labelLayout="gridLeft"> <tc:gridLayoutConstraint columnSpan="4"/> </tc:in> <tc:in label="Street" labelLayout="gridLeft"/> <tc:in label="No" labelLayout="gridLeft"/> <tc:in label="ZIP" labelLayout="gridLeft"/> <tc:in label="City" labelLayout="gridLeft"/> <tc:textarea label="Note" labelLayout="gridLeft"> <tc:gridLayoutConstraint columnSpan="4"/> </tc:textarea> </tc:gridLayout> </tc:box>

Personal Information

<tc:box label="2-dimensional layout"> <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr"> <tc:style minHeight="600px"/> <tc:box label="#1"> columnSpan=2 <tc:gridLayoutConstraint columnSpan="2"/> </tc:box> <tc:box label="#2"> rowSpan=2 <tc:gridLayoutConstraint rowSpan="2"/> </tc:box> <tc:box label="#3"> rowSpan=2 <tc:gridLayoutConstraint rowSpan="2"/> </tc:box> <tc:box label="#4"/> <tc:box label="#5"> columnSpan=2 <tc:gridLayoutConstraint columnSpan="2"/> </tc:box> </tc:gridLayout> </tc:box>

2-dimensional layout

#1

columnSpan=2

#2

rowSpan=2

#3

rowSpan=2

#4

#5

columnSpan=2

<tc:box label="ordering/positioning of the components"> <tc:gridLayout columns="1fr 2fr 1fr" rows="1fr 2fr 1fr"> <tc:style minHeight="600px"/> <tc:box label="#1"> columnSpan=2 gridColumn=1 gridRow=3 <tc:gridLayoutConstraint columnSpan="2" gridColumn="1" gridRow="3"/> </tc:box> <tc:box label="#2"> rowSpan=2 gridColumn=3 gridRow=2 <tc:gridLayoutConstraint rowSpan="2" gridColumn="3" gridRow="2"/> </tc:box> <tc:box label="#3"> rowSpan=2 gridColumn=1 gridRow=1 <tc:gridLayoutConstraint rowSpan="2" gridColumn="1" gridRow="1"/> </tc:box> <tc:box label="#4"/> <tc:box label="#5"> columnSpan=2 gridColumn=2 gridRow=1 <tc:gridLayoutConstraint columnSpan="2" gridColumn="2" gridRow="1"/> </tc:box> </tc:gridLayout> </tc:box>

ordering/positioning of the components

#1

columnSpan=2 gridColumn=1 gridRow=3

#2

rowSpan=2 gridColumn=3 gridRow=2

#3

rowSpan=2 gridColumn=1 gridRow=1

#4

#5

columnSpan=2 gridColumn=2 gridRow=1
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.