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