[Resolved] Form checkbox styling

[Author]

Posts

[leilaG]

Hello,

We've added the code below to have checkboxes display in 4 columns:

ul.wpt-form-set {overflow: hidden; display: block; clear: both;}
ul.wpt-form-set li.checkbox {width: 25%; float: left;}

But it's adding a gap on every first row (image attached)

The 'Amenities' checkboxs are not displaying in columns.
All the fields from 'sq. ft.' and below seem to be displaying slightly to the left from the rest of form.

Form: hidden link

Thanks
Leila

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Leila,

Thank you for getting in touch.

This appears to be an issue with the load priority of the custom css that you're using.

Can you let me know where you're adding the css?

Thanks,
Shane

[leilaG]

Hi Shane,

It's been added to the Toolset Post form CSS editor.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Leila,

Would you mind allowing me to have admin access to the website so that I can have a more detailed look at this for you ?

I've enabled the private fields for your next response.

Thanks,
Shane

[leilaG]

Sure, there are no private fields showing to give access.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Leila,

Here are the private field.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Leila,

I've added the workaround below to load the css after the page has finish loading.

jQuery(window).on('load', function() {

 // code here
   jQuery('ul.wpt-form-set li.checkbox').css({
      	'width': '25%',
        'float': 'left'
      });
});

This way it ensures that the checkboxes are being reflowed correctly.

Thanks,
Shane

[leilaG]

That's great! Thanks Shane.

Do you know why the 4 columns isn't working on the last checklist 'Amenities' ?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Leila,

The issue was that the css classes for the Amenities were slightly different.

I've added this code to your form.

ul.wpt-form-set li.wpt-form-item {width: 25%; float: left;}

Thanks,
Shane

[leilaG]

Amazing! My issue is resolved now. Thank you!