Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
I don't want to nit-pick but, in the contact form, when using
<div data-lang="fr">Téléphone</div><div data-lang="en">Phone</div>, for some reason the font is not the same as for the other boxes.
Offline
This one got a little lost where it was in the larger topic of multi-language support. So I'm giving it it's own topic.
The issue seems to be that fonts aren't being applied in the same way for all field labels
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I'm also seeing a difference. It seems that the default fields of Name and Email are having a font-weight of 700 applied while the added fields are having a font-weight of 400 applied
This seems to only happen when multiple language code is added to the additional fields.
Whereas a form label that does not have multiple languages in the added fields gets a font-weight of 700 applied, just like the default labels.
One other thing I noticed is that if an added field that uses a label with multiple languages is also set to be required, the asterisk is pushed away from the text and ends up in front of the text box.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
what I see happening is this:
For forms that use multiple languages in added fields:
the font-weight for the default fields of Name and Email is coming from the form label styling
The font-weight for added fields is coming from the body styling
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
So the solution is to not use a div in writing the multi-language code for the form labels. Instead, use this:
<label for="contact-field_1" data-lang="en">Telephone-en</label><label for="contact-field_1" data-lang="fr">Telephone-fr</label><label for="contact-field_1" data-lang="de">Telephone-de</label>You'll need to identify contact-field_1, etc. I assume they're in order.
This also solves the asterisk issue. I'm assuming that since divs are block level elements, they're pushing that asterisk down. Labels are inline elements.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thank you for this, Rod
Offline