Skip Navigation

[Resolved] Form checkbox styling

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 9 replies, has 2 voices.

Last updated by leilaG 7 months ago.

Assigned support staff: Shane.

Author
Posts
#2404275
form-style.png

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

#2404539

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

#2405987

Hi Shane,

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

#2406191

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

#2406465

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

#2406499

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Leila,

Here are the private field.

#2407177

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

#2407435

That's great! Thanks Shane.

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

#2407893

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

#2408095

Amazing! My issue is resolved now. Thank you!