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 resposiveness.

For Tobago 3 we have alternative layout managers like <tc:flexLayout> and <tc:selgmentLayout>. The <tc:gridLayout> was implemented with the help of JavaScript to have a working and quite compatible version, but it was not recommented 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.

<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

Salutation

First Name

Last Name

c/o

Street

ZIP

City

Note

<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>

Menu

Grid Layout

Personal Information

2-dimensional layout

#1

#2

#3

#4

#5

ordering/positioning of the components

#1

#2

#3

#4

#5