Backend Forms up to 4 columns

This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

Crazymodder

8 years ago

Hi,

Sometimes its helpfull to have some smaller backend input fields instead of 2. I have added the following css to backend customizing

.form-group.span-left1 {
    float: left;
    width: 22.75%;
    clear: left;
    margin-right: 1.5%;
}
.form-group.span-left2 {
    float: left;
    width: 22.75%;
    margin-left: 1.5%;
}
.form-group.span-right1 {
    float: left;
    width: 22.75%;
    margin-left: 3%;
}
.form-group.span-right2 {
    float: right;
    width: 22.75%;
    margin-left: 1.5%;
    clear: right;
}

now I can you span: left1/right1 span: left2/right2

you can combine this with standard left and right. So you can build layouts like 1/1/2 or 2/1/1 or surly 1/1/1/1

Last updated 8 years ago

andy.carton

7 years ago

Hi!

-) Just use the storm.css markup in your fields.yaml

fields:

    'left/left':
        label: 'left/left'
        span: storm
        type: text
        comment: col-sm-3
        cssClass: col-sm-3

    'left/right':
        label: 'left/right'
        span: storm
        type: text
        comment: col-sm-3
        cssClass: col-sm-3

    'right/left':
        label: 'right/left'
        span: storm
        type: text
        comment: col-sm-3
        cssClass: col-sm-3

    'right/right':
        label: 'right/right'
        span: storm
        type: text
        comment: col-sm-3
        cssClass: col-sm-3

    'left/left/2':
        label: 'left'
        span: storm
        type: text
        comment: col-sm-6
        cssClass: col-sm-6

    'left/right/2':
        label: 'left/right'
        span: storm
        type: text
        comment: col-sm-3
        cssClass: col-sm-3

    'right/left/2':
        label: 'right/left'
        span: storm
        type: text
        comment: col-sm-3
        cssClass: col-sm-3

    'offset/6':
        label: 'offset left'
        span: storm
        type: text
        comment: col-sm-offset-6 col-sm-6
        cssClass: col-sm-offset-6 col-sm-6

    'grid/3/1':
        label: '1'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/2':
        label: '2'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/3':
        label: '3'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/4':
        label: '4'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/5':
        label: '5'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/6':
        label: '6'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/7':
        label: '7'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/8':
        label: '8'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/9':
        label: '9'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/10':
        label: '10'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/11':
        label: '11'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

    'grid/3/12':
        label: '12'
        span: storm
        type: text
        comment: col-sm-1
        cssClass: col-sm-1

ryan37023

5 years ago

This one actually has more padding than regular span. But nice work anyway!

andy.carton said:

Hi!

-) Just use the storm.css markup in your fields.yaml

fields:

   'left/left':
       label: 'left/left'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'left/right':
       label: 'left/right'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'right/left':
       label: 'right/left'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'right/right':
       label: 'right/right'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'left/left/2':
       label: 'left'
       span: storm
       type: text
       comment: col-sm-6
       cssClass: col-sm-6

   'left/right/2':
       label: 'left/right'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'right/left/2':
       label: 'right/left'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'offset/6':
       label: 'offset left'
       span: storm
       type: text
       comment: col-sm-offset-6 col-sm-6
       cssClass: col-sm-offset-6 col-sm-6

   'grid/3/1':
       label: '1'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/2':
       label: '2'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/3':
       label: '3'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/4':
       label: '4'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/5':
       label: '5'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/6':
       label: '6'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/7':
       label: '7'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/8':
       label: '8'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/9':
       label: '9'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/10':
       label: '10'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/11':
       label: '11'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/12':
       label: '12'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

Last updated 5 years ago

st.james.jomuad13119

4 years ago

andy.carton said:

Hi!

-) Just use the storm.css markup in your fields.yaml

fields:

   'left/left':
       label: 'left/left'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'left/right':
       label: 'left/right'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'right/left':
       label: 'right/left'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'right/right':
       label: 'right/right'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'left/left/2':
       label: 'left'
       span: storm
       type: text
       comment: col-sm-6
       cssClass: col-sm-6

   'left/right/2':
       label: 'left/right'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'right/left/2':
       label: 'right/left'
       span: storm
       type: text
       comment: col-sm-3
       cssClass: col-sm-3

   'offset/6':
       label: 'offset left'
       span: storm
       type: text
       comment: col-sm-offset-6 col-sm-6
       cssClass: col-sm-offset-6 col-sm-6

   'grid/3/1':
       label: '1'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/2':
       label: '2'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/3':
       label: '3'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/4':
       label: '4'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/5':
       label: '5'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/6':
       label: '6'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/7':
       label: '7'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/8':
       label: '8'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/9':
       label: '9'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/10':
       label: '10'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/11':
       label: '11'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

   'grid/3/12':
       label: '12'
       span: storm
       type: text
       comment: col-sm-1
       cssClass: col-sm-1

Thanks, great samples...

1-4 of 4

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.

Latest from the blog

October CMS Celebrates 10 Years with the v3.7 Release

Today, October CMS celebrates a major milestone—our 10th anniversary! It's been a decade of growth, challenges, and incredible support from our amazing community. What began as a passion project has evolved into a platform we're proud of, thanks to your feedback and enthusiasm.

Continue reading →