Form Layout: CSS Classes

Can be applied to any element (however, it is designed to be used with buttons).

This predefined CSS class causesan element to have its caption fully visible and does not include excessive space in any screen size, as shown for the Shop for Rates button in the following screenshots for a narrow screen and a wide screen. That is, the width of the button is fixed for any screen size.

<field name="ShipVia">
  <qp-button id="btnShopRates"
    state.bind="ShopRates"
    class="col-auto">
  </qp-button>
</field>

Can be applied to any element.

This predefined CSS class specifies the width of a control in columns. N, which is a number from 1 to 12, defines the number of columns that the control occupies relative to the width of its parent control. (That is, the width of the parent control is considered to be 12 columns.)

You can use these classes to organize multiple UI controls inside a field area (which are implemented with Merge in PXLayoutRule in ASPX). For examples of the organization of multiple UI controls in a field area, see Form Layout: Adding a Control Next to a Field.

<field name="ShipVia">
    <qp-button id="btnShopRates"
      state.bind="ShopRates"
      class="col-7">
    </qp-button>
</field>

This predefined CSS class specifies the width of a control in columns for different types of screens:

• For large screens: col-lg-X
• For medium screens: col-md-X
• For small screens: col-sm-X

In the rules, the number from 1 to 12 indicates the width in columns, where 1 is the smallest width and 12 is the full width of the parent control.

<div class="v-stack
  col-sm-12 col-md-6 col-lg-4">

This predefined CSS class indicates that the columns in the template should be aligned in height.

This predefined CSS class displays a container in a separate gray frame.

<qp-grid id="gridSalesPerTran"
view.bind="SalesPerTran"
class="framed-section"></qp-grid>

This predefined CSS class stretches the right side of the template to the right side of the screen, ignoring the maximum size of the form, which is 1600 px.

We recommend that you use this CSS class if you have a wide grid inside the template.

<qp-template name="7-17"
  id="comissions-form"
  class="full-width">
    ...
</qp-template>

This predefined CSS class defines the list of elements rendered horizontally.

<div class="h-stack">
    <div class="h-stack" >
        <qp-fieldset id="first"
            hide-caption="true">
            ...
        </qp-fieldset>
        <qp-fieldset id="second"
            hide-caption="false">
            ...
        </qp-fieldset>
    </div>
    <qp-fieldset id="summary"
        hide-caption="false"
        caption="Summary" >
        ...
    </qp-fieldset>
</div>

This predefined CSS class defines the style for the pane with a blue background.

<qp-fieldset id="totals"
  hide-caption="false" 
  class="highlights-section">
  ...
</qp-fieldset>

Can be applied to any container.

This predefined CSS class specifies the width of the labels in the container starting from qp-field up to the whole screen.

• xxs: 40 px
• xs: 70 px
• s: 100 px
• sm: 140 px
• m: 200 px
• xm: 250 px
• l: 300 px
• xl: 350 px
• xxl: 400 px

Can be applied to any element.

This predefined CSS class specifies that the element and all its nested elements do not have labels. However, you can override this behavior in any nested element by specifying class="label-size-<SIZE>" for the nested element.

You do not need to use class="no-label" with qp-field. qp-field does not have a label by default.

<qp-template name="1" id="mf"
  class="no-label">
  <qp-fieldset id="fs1"
    view.bind="MyView"
    class="label-size-s">
    <field name="One"></field>
    <field name="Two" class="no-label">
    </field>
  </qp-fieldset>
  <qp-fieldset id="fs2"
    view.bind="MyView">
    <field name="Three"></field>
    <field name="Four" class="label-size-m">
    </field>
  </qp-fieldset>
</qp-template>

Can be applied to any container.

This predefined CSS class prevents the element from being stretched over the height of the whole form or the area of a form, such as a tab.

(By default, the grid is stretched over the height of the whole area.)

<div class="v-stack">
    <div id="Filter_form" wg-container>
            ...
    </div>
    <qp-grid id="grid" view.bind="EnqResult"
      class="no-stretch">
    </qp-grid>
</div>

Can be applied to any container.

This predefined CSS class stretches the element over the height of the whole screen or the area of a screen, such as a tab.

The class is applied by default to qp-grid and qp-tabbar.

<qp-rich-text-editor
  id="edDescription"
  class="stretch"
  state.bind="Case.Description"
  wg-field>
</qp-rich-text-editor>

Can be applied to qp-fieldset .

This predefined CSS class defines the style of the pane with the transparent background.

We recommend that you use transparency only for fieldsets with a maximum of two rows of controls.

The following screenshot shows an element in a transparent fieldset.

The following screenshot shows a selected check box in a transparent fieldset.

<qp-template name="17-17-14"
  id="byBookFilterForm">
  <qp-fieldset slot="A"
    id="deprBookFilterForm"
    view.bind="deprbookfilter"
    class="transparent-section">
    <field name="BookID"></field>
  </qp-fieldset>
</qp-template>

Can be applied to any container.

This predefined CSS class defines the list of elements rendered vertically.

The elements are rendered vertically by default; therefore, in most cases, there is no need to use this class.

<div class="v-stack">
    <div id="Filter_form" wg-container>
            ...
    </div>
    <qp-grid id="grid" view.bind="EnqResult">
    </qp-grid>
</div>