Skip Navigation

[Résolu] Checkbox Styling

This support ticket is created Il y a 4 années et 9 mois. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 6 réponses, has 2 voix.

Last updated by Luo Yang Il y a 4 années et 9 mois.

Assisted by: Luo Yang.

Auteur
Publications
#1277983
Screen Shot 2019-06-26 at 9.02.46 PM.png

Tell us what you are trying to do? I am trying to style a checkbox do that the text is aligned with the checkbox rather then skewed up.

Is there any documentation that you are following? I can't find anything on the Toolset site

Is there a similar example that we can see?

What is the link to your site?

hidden link

#1278023
checkbox.JPG

Hello,

I have tried the URL you mentioned above, but I see different from your screenshot, see screenshot checkbox.JPG

Is this problem resolved? Please let me know if you need more assistance for it. thanks

#1278033

Hi, what browser are you in? In Safari and Chrome they are misaligned, like my first screenshot. Here is the link again: hidden link

In browsers, we want the checkbox on the left, and then text on the right, they should be aligned on a grid (so they have the same typographic baseline). Right now the text is too high.

#1278035
Screen Shot 2019-06-26 at 11.14.16 PM.png
Screen Shot 2019-06-26 at 11.14.05 PM.png

Alignment should be something like this.

#1278101
checkbox1.JPG

I am using Chrome browser, I have test again the URL you mentioned above, but get the same result as the screenshot as I mentioned above.

I have tested it in my localhost, it is possible to style the checkbox field as your screenshot, for example:

input[data-wpt-name="wpcf-privacy-policy"]{
position: absolute;
    left: 0px;
    top: -12px;
    width: 10px;
}

See screenshhot checkbox1.JPG

#1278765

Thank you, I was able to work with that code, but it definitely does not render the same way as it does on your screen. I tested different devices and colleagues are testing on various devices as well. It's frustrating that I can't replicate your view.

#1279213

Since it is a custom CSS codes problem, if you need more assistance for it, please provide a test site with the same problem, I can setup a demo for you, thanks

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.