How to make 3 or 4 column layout for Knack Form?

API & Customization Ask Developers
1

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.

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}

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

We can have four column layout with slight modification to above CSS.

2

Thanks guys but unfortunately when I use this the "+" symbol used in front of a filed to add a new option (linking to a child page) get shifted belllow the form entry, which does not look good. Anyone has an idea of how you can expand the column width ? Thanks

3

Stevan, I will copy this to tips & tricks.

thanks

4

Great. This topic would be perfect in tip & tricks

5

Adding more details to make process little clear. If anyone could rewrite this post for clarity, I would be glad.

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.