Making 3 or 4 column layout for Knack Form

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.


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.


Following is the CSS code that I used to achieve 3( or 4) column layout for the form. Add this CSS under API & Code>CSS

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

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}

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



How do you add more columns with the details section? I was able to use this method for my form.

But I would like to do the same thing when I am showing the detail of the filled out form.

And just another update.  One of the problems with this approach is that there is a 'known issue" (i.e. a bug) in Knack that two column groups render wrong on mobile devices - the columns stack vertically but only occupy half the screen.  One day they will fix this, but in the meantime it means this idea suffers from the same bug - when you build two groups of 2 columns to get a 4 column screen, they render half width on a mobile device.

My workaround is to build a stack of 4 (or 5 or 6) 1 column wide groups, and let the CSS spread them horizontally when displayed on a large screen, and use Brad Steven's trick to drop it back to stacked single columns on a mobile device.  This is working great.

My CSS is below.  Hope its of use to someone.

/*this puts a thin grey border around each of the 4 columns, looks better in my opinion*/
#view_544 > form > ul:nth-child(1) > li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% }
#view_544 > form > ul:nth-child(2) > li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% }
#view_544 > form > ul:nth-child(3) > li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% }
#view_544 > form > ul:nth-child(4) > li { border: solid 1px lightgrey ; border-radius: 0px; margin: 10px; padding:20px; min-width: 30% }

/*this spreads the 4 groups across the screen, unless the screen is less than 1200pc axross and then it defaults to stacking them vertically*/
@media screen and (min-width: 1199px) {
/*this sits the 4 groups side by side, sets a fixed heigt of 750px, and sets up the passing and seperation between the groups*/
#view_544 ul.kn-form-group{float:left; margin-left: 5px; height:750px}
#view_544 ul.kn-form-group.clearfix:nth-child(3){clear:both}
#view_544 ul.kn-form-group.clearfix:nth-child(2){margin-left: 20px;}
#view_544 div.kn-submit{clear:both}
}

 

Very late to the party, but thanks for this post - once I got my head around it I found it really very useful, including all the bits that everyone chipped in.  Great example of collaboration!

Thank you Raju!  I'm going to test it out now, I appreciate your help!

 

eg.

following example for View_4 in my app. Simiarly you can target for Scene. Replace View_4 with Scene_ID

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

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

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

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

#view_4 div.kn-submit{clear:both}

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

Yes, you can. You have to find id of group and use that id in CSS for defined specific group or scene or view as needed.

Does this css affect every group and form in my app?  I feel like it does.  Is there a way to define it so that it's only affecting specific groups on a specific page?  I have several forms(pages) and each form has a few groups.

I'd like to be able to add a parameter that targets a specific page and specific groups on that page so I can add more columns to the layout.

Thanks for your help!

found a solution to my earlier problem. If you want to keep the + sign on any additional options next to a field, this is the code:

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

ul.kn-form-group {width:650px;margin-left: 25px;}

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}

Hi,

You can choose the layout as 1 or 2 columns (Width) then for each group you can choose 1, 2 or 3 columns (Width) giving 6 columns wide.

For rows down (Fields) or groups down you can add as required??

Do you have an example sketch?

Thanks

Dan

Please add CSS something like below, adjust the width in px as needed. This should fix the issue. I have not tested this though. Please go ahead the test it out.

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

ul.kn-form-group {width:100px;margin-left: 25px;}

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

Thanks, this is nice solution, it has some minor issues in that some of wider fields like short text will overlap the next column but I just managed to organise my fields so that was not an issue.

Any way to control the gap between groups, looks a little cramped  ?


Thanks again for your patience and help, appreciated 

Enrico,

You were near to what you want.

---------

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

ul.kn-form-group.clearfix:nth-child(5){clear:both} //last column, please change 5 to last column value

ul.kn-form-group.clearfix:nth-child(4){margin-left: 25px;} //repeat this for all except first and last column value

ul.kn-form-group.clearfix:nth-child(3){margin-left: 25px;} please add this

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

 

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

div.kn-submit{clear:both}

---------


Please remember, in builder form, you should have 3 groups(each group as 2 columns).

so, if you want six column, you would have 3 groups(each group as 2 columns)

if you want have 7 column, you would have 4 groups[ 3 groups(each group as 2 columns), 4th one with 1 column].

Rest is CSS trick.

I hope this make sense and you will achieve it.

with regards,

Raju

Hi I tried 

1)

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}

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

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

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

div.kn-submit{clear:both}

and 

2) 

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

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

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

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}

on my form i had 4 groups each with 2 Col set.

4 Col is the max i could achieve.. if not obvious i know nothing about CSS

Thanks 

Hello Enrico,

Trick mention above should work, you need to repeat following css with earlier one as mentioned earlier, matching the number of columns.. eg. for 4th column following css, for more add more.

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

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

Though, I have not tested this, please go ahead see how it work

Hi , any way to make this go to 5 and or 6 Columns ?

It would really help with the form i am currently working on 

Thanks 

Raju:

Do want to get into the app through Builder? Is that what you mean?

If so, if you give me your email address I'll share the app through builder so you can see it all. 

Send your email address to edcooper714@gmail.com

Thanks for your help.

Ed, is it possible to share you app link to view?

I'm having a problem. I don't know how to force a "line feed" so the result, as an example, is 4 columns on the first line, 3 columns on the second line etc etc.

I've tried everything. 

Hope to get some help on this.

A suggestion to work with smaller screens - found the 3rd and 4th columns weren't scaling properly on phones but this did the trick:

 

@media screen and (min-width: 501px) {
	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}
                }

 Thanks to Benjamin for the idea to access the @media rule here http://helpdesk.knackhq.com/support/discussions/topics/5000039346