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!
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.
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.
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
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.
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.