Skip Navigation

[Resolved] Style differences and unusual looking structure in Views or Forms

This thread is resolved. Here is a description of the problem and solution.

Problem:
It seems several styles are off on my site, such as checkboxes and labels distance, but also links, radio buttons, and more.

Solution:
This website is likely overwriting Bootstrap rules with some "custom.css" and/or the Theme CSS.
If you remove those, the issue will be solved usually.

For example input[type="checkbox"], input[type="radio"] are overwritten native Bootstrap Rules, and are often overwritten by Themes
The same goes for button, input, optgroup, select, textarea and more.

Those need either to be edited or removed and Bootstrap applied properly.

This issue will usually not appear if you use the WordPress Twenty Nineteen Theme and load Bootstrap in Toolset > Settings > Bootstrap Loading.

This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 2 replies, has 2 voices.

Last updated by briana-5 5 years, 10 months ago.

Assisted by: Beda.

Author
Posts
#1201178

Can you help me understand why there is no space between the checkbox and the label in this form?

hidden link

I'm not sure what css to target or how this happened.

#1201247

This website is overwriting Bootstrap rules with some "reboot.css" and the Theme CSS.
If you remove those, the issue will be solved.

It seems, input[type="checkbox"], input[type="radio"] are overwritten by hidden link (padding: 0;) and also, button, input, optgroup, select, textarea are overwritten with margin: 0px; by reboot.css

Those need either to be edited or removed and Bootstrap applied.

This issue, for example, will disappear if you use the WordPress Twenty Nineteen Theme and load Bootstrap in Toolset > Settings > Bootstrap Loading.

#1205025

Thanks, I'll dig into that.