Post Contents
These #$@&%*! CheckBoxes!
Necessity is a Mother
Ok, I know that’s not how the saying goes but it feels like that sometimes ya know?
So while I was creating my suggest a tutorial post, I had to work at this to get these set up how I wanted them.
I figure anything that takes me 30 minutes or more to figure out is probably worth documenting.
So, you have your handy dandy form, and you have a bunch of checkboxes like the one below.
The problem of course is that list of checkboxes is way too long, and… the checkboxes being out of line with the labels will drive me nuts.
Suggest a Tutorial!
What to do, What to do?
So, 3 things.
1. We will set those checkboxes in line with the labels.
2. We will make our list into 3 columns.
3. We will adjust our list to stay one column on mobile
4. But wait! There’s more, the mobile layout will probably get us a Search Console warning so we will spread those out a bit.
Getting CheckBoxes Inline
Ok, so maybe there is a step 0. Before we do any of this what we want to avoid is making changes to this form that affects all our other forms who knows where.
In order to do that, we need to set a class on this form so that all of our changes will only affect this one.
Edit your form > Advanced > Add a unique class in there. I’ll go with, check-tut-form.
Fixing the CheckBoxes
So with that out of the way, we can set up the CSS that will put our checkboxes inline with the labels. I added our class .check-tut-form to the start of the default Elementor classes so that only these will get updated.
You could put your CSS in a lot of places, but you don’t want to have to hunt for it later, so best practice would be to find a place and stick with it.
I will put ours inside the global site settings Custom CSS. Now, the checks are centered vertically and we’re looking better.
Creating Columns
Firstly, let’s go into Elementor and tell it that you want your items inline. You could be done here, but the check/label sections will be right on top of each other with no separator.
You’ll want to Edit Form > click into the field you want to edit > toggle the Inline List setting to Yes
The Columns CSS
Next we’re going to add our column CSS. This is going to do a few things all at once.
1. it’s going to apply one set of styles to everything that has a minimum width of 768 going up to whatever, as being 33% of the page width ( 3 Columns)
2. We will also add some bottom padding on each of the list items
3. we will create a duplicate of the first section that will only go up to screens as wide as 767px.
Wrapping Up
And that is it. Our final modified form is right below here. Because we only put our class check-tut-form on this bottom form, the top one is still fugly. But some people might dig it?
Suggest a Tutorial!
Final Thoughts
It’s not too tough to do simple things like this if you understand the concepts and keep your flow organized. Maybe more important than this little bit of CSS is understanding how this CSS interacts with the page, and how to use it complementary to Elementor’s core functionality.
Have a better idea of how to do this? Want to see something else, comment below or send me a suggestion!
6 Responses
Hi, I solve this in a different way without media queries.
Here is my CSS, its’s only one line
#check-tut-form .elementor-field-type-checkbox > div > * {
flex: 0 1 300px
}
The .elementor-field-subgroup is already a flexbox so I only have to define the flex properties in the direct child elements, in this case the .elementor-field-option
First I have to target only the fieldgroups with checkboxes (.elementor-field-type-checkbox.
Than I dig one level deeper to the .elementor-field-subgroup where I select all direct children the .elementor-field-option.
These elements have flex grow set to 0 and flex shrink to 1.
Flexbasis is set to a fixed value, something like 300px.
Flexbox will now determine how many columns there will be based on viewport width, without the need for media queries. You also don’t have to set the items to inline anymore.
When section is full width, no gap and viewport is less than 600px wide (2*300px flex-basis) checkboxes will stack in one column.
When viewport is wider than 600px, there will be 2 columns.
When wider than 900px (3*300px) there will be 3 columns.
Wider than 1200px, 4 columns, wider than 1500px, 5 columns, and so on…
It adjusts automatically by flexbox.
You can also set flow grow to 1 but his can cause problems sometimes.
Here is a test page, the section is full width with no gap, no padding used.
Not the most appealing design I know, but it’s just to proof my point it’s working fine.
https://franktielemans.be/blog/checkbox-in-column
Greets,
Usefull website! Keep up the good work!
Thanks Frank! This is great stuff!
I entered the CSS, however, it did not work for me!
Did I make an error? Would have loved to try the other person’s option, but I don’t know CSS code very well.
.check-tut-form .elementor-field-option input { vertical-align: middle;
}
.check-tut-form span.elementor-field-option {
display: inline-block;
vertical-align: middle;
}
@media(min-width:768px){.check-tut-form.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option{
width:33%;
padding-bottom:5px;
}
}
@media(max-width:767px){.check-tut-form.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option{
width:100%;
padding-bottom:5px;
}
}
Hey Loree, could you post your url here? I’ll not publish it if you don’t want me to but if I could look at how it’s implemented I’ll be happy to take a look.
Oh, Thank you very much.
https://www.radianceomt.ca/referring-practitioners/
yes, best not post the URL