Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Put Those Pesky Elementor Checkboxes In Straight Columns

elementor checkboxes
CSS
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

These #$@&%*! CheckBoxes!

You've got a bunch of checkboxes in a form and you don't want that long ugly single column, I got you covered.

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!

2 Responses

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

CSS

Flexbox Tricks Are An Elementor Game Changer

RELATED
Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page