Form layout option: allow 3 columns

Feature Requests
1

I have a main details page where I need to add connected data in 4+ connected objects. If I could set the form layout to 3 columns, I could utilize the white space to the right of the respective entry form reducing the vertical footprint of my page.


2
Good. Nice to hear this idea has been implemented.

3

This will be available as one of the new features in our new builder we'll be launching soon!

4

Please add to the UI not with CSS hacks

1 Like
5

Hi,


Knack form support only 2 column layout for the form. We can have more columns using CSS. Thanks to Nic (Knack Team) for suggesting the workout.

To achieve, please follow the steps as below.


In form, I have one group with 2 column layout.

Next, I added another group with 1 column layout, which CSS will transform into (2+1) column layout.


And CSS tranform it into 3rd column.

If 2nd group had 2 column layout, CSS would make it 4 column layout.


With this, we can have more columns if we keep adding group.


Following is the CSS code that I used to achieve 3 column layout for the form.

-------------------------

ul.kn-form-group{float:left}

ul.kn-form-group.clearfix:nth-child(3){clear:both}

ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;}

div.kn-submit{clear:both}

--------------------

http://helpdesk.knackhq.com/support/discussions/topics/5000039252

6

Hi,


Knack form support only 2 column layout for the form. We can have more columns using CSS. Thanks to Nic (Knack Team) for suggesting the workout.

To achieve, please follow the steps as below.


In form, I have one group with 2 column layout.

Next, I added another group with 1 column layout, which CSS will transform into (2+1) column layout.


And CSS tranform it into 3rd column.

If 2nd group had 2 column layout, CSS would make it 4 column layout.


With this, we can have more columns if we keep adding group.


Following is the CSS code that I used to achieve 3 column layout for the form.

-------------------------

ul.kn-form-group{float:left}

ul.kn-form-group.clearfix:nth-child(3){clear:both}

ul.kn-form-group.clearfix:nth-child(2){margin-left: 25px;}

div.kn-submit{clear:both}

--------------------