CssLayout - CUBA Platform. Developer’s Manual

3.5.2.2.4. CssLayout

LIVE DEMO

API DOCS

CssLayout is a container that enables full control over placement and styling of enclosed components using CSS.

XML-name of the component: cssLayout.

Below is an example of using cssLayout for simple responsive screen.

Displaying components on a wide screen:

Displaying components on a narrow screen:

Screen’s XML-descriptor:

<cssLayout responsive="true" stylename="responsive-container" width="100%">
    <vbox margin="true" spacing="true" stylename="group-panel">
        <textField caption="Field One" width="100%"/>
        <textField caption="Field Two" width="100%"/>
        <button caption="Button"/>
    </vbox>
    <vbox margin="true" spacing="true" stylename="group-panel">
        <textField caption="Field Three" width="100%"/>
        <textField caption="Field Four" width="100%"/>
        <button caption="Button"/>
    </vbox>
</cssLayout>

Content of modules/web/themes/halo/halo-ext.scss file (see Extending an Existing Theme for how to create this file):

/* Define your theme modifications inside next mixin */
@mixin halo-ext {
  @include halo;

  .responsive-container {
    &[width-range~="0-900px"] {
      .group-panel {
        width: 100% !important;
      }
    }

    &[width-range~="901px-"] {
      .group-panel {
        width: 50% !important;
      }
    }
  }
}

stylename attribute enables setting predefined styles to the CssLayout component either in the XML descriptor or in the screen controller.

v-component-group style is used to create a grouped set of components, i.e. a row of components which are joined seamlessly together:

<cssLayout stylename="v-component-group">
    <textField inputPrompt="Search..."/>
    <button caption="OK"/>
</cssLayout>

well style makes container look "sunken" with shaded background.

card style name makes a layout look like a card. Combined with an additional v-panel-caption style name for any enclosed layout, it provides a possibility to create enhanced composite layouts, for example:

<cssLayout height="300px"
           stylename="card"
           width="300px">
    <hbox stylename="v-panel-caption"
          width="100%">
        <label value="Widget caption"/>
        <button align="MIDDLE_RIGHT"
                icon="font-icon:EXPAND"
                stylename="borderless-colored"/>
    </hbox>
    <vbox height="100%">
        <label value="Panel content"/>
    </vbox>
</cssLayout>

and result will be the following:

Attributes of cssLayout: caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - box.expandRatio - height - id - responsive - stylename - visible - width
API: add - addShortcutAction - addLayoutClickListener - getComponent - getComponentNN - getComponents - getOwnComponent - getOwnComponents - indexOf - remove - removeAll