Hello,
I trying to build a form with two columns. Is this possible with Bricks’s Form Element? Would it be possible with CSS? Or do I have to look at a third-party plugin?
Thanks in advance.
Best regards,
Pedro
Hi Pedro,
You can change the width of each field individually, but you can’t “group” them into columns, as in your screenshot.
Might be worth a try on the Idea Board 
Best regards,
timmse
Hello Timmse,
I did play a bit with the “width” but they don´t get organized as I would like.
Maybe with CSS, but it will be complicated without two separate containers envolving each group. For now I’ll leave with the normal settings.
I’ll follow your tip and add it to the Idea Board.
Thanks.
Best regards,
Pedro
Hello again,
I just want to share the solution I found with CSS. We have to use the selectors :nth-last-child, :nth-child and last-child to achieve the two column styling.
The original code was a bit long, but following another user’s suggestion on the Facebook group led me to this simple and final piece of code.
@media (min-width: 768px) {
// Left column fields styling
.form-group:not(:nth-child(2n)), .form-group:last-child, .form-group:nth-child(3), .form-group:nth-child(2) {
margin-right: 50%;
width:50%;
}
// Text area styling
.form-group:nth-child(4) {
position: absolute;
margin-left: 49%;
width: 49%;
}
}
It’s not necessary to add width in the Bricks form panel for the desktop and tablet view form elements. The CSS code is enough.
The only additional configuration that has to be set is on the two mobile views where I set 100% width for all input elements on the Bricks Panel.
Hope it can be useful for others.
Thanks.
Best regards.
Pedro
1 Like
Hi Pedro,
thanks for sharing your solution with us!
CSS Grid via custom CSS would certainly be a solution as well.
Best regards,
timmse
1 Like
Definitely agree that being able to split fields and columns would be a nice workflow improvement. Having to do hand-coding on all this stuff slows projects down,
1 Like