Winter CMS resources and help articles

Simple and to the point. Optimized by the community.

Give your form fields more flexibility

4
by DamsFX, last modified on October 21st, 2021

When defining backend form fields aligments whith the span property, you can set it to storm and add the cssClass property to manage the aligment based on Bootstrap classes.

services:
    label: 'Services'
    span: right
    type: partial
    path: ...
quantity_default:
    label: 'Default quantity'
    span: storm 
    cssClass: 'col-xs-12 col-sm-6 col-lg-2' 
    type: number
quantity_min:
    label: 'Minimum quantity'
    span: storm 
    cssClass: 'col-xs-12 col-sm-6 col-lg-2' 
    type: number
quantity_max:
    label: 'Maximum quantity'
    span: storm 
    cssClass: 'col-xs-12 col-sm-6 col-lg-2' 
    type: number

The css classes col-xs-12 col-sm-6 col-lg-2 mimic the default left/right behavior on xs and sm screens, but align the 3 fields on an half screen for xl screen width. You can use up to 12 columns to place your fields !

The css classes availables are col-[screen size]-[col size] :

  • screen size : xs, sm, md or lg
  • col size : from 1 to 12

Discussion

0 comments

We use cookies to measure the performance of this website. Do you want to accept these cookies?