Unable to see labels in Chrome

Hi @des2019

This is not normal and must be related to some other plugin or your theme. Is your site live somewhere that I can see and debug it for you? I don’t need back-end access, just the url.

Thanks,
Angus

Hi Angus,
As mentioned, I can see everything when viewing in Firefox and Safari. It’s just Chrome where I cannot see any labels if they’re placed inside textarea or if I use Outlined=”yes”. However, I just discovered a new problem: When viewing on iPad, the labels scrunch up to where they cannot be read. I’m in the process of redesigning the form and No using the boxed feature since the top part of the form works on all browsers.

Here’s the url – https://www.eidon.com/vendor-application/

Thank you for checking this out.

Des

• This reply was modified 5 years, 10 months ago by des2019.

Hi @des2019

All your issues are related to your theme setting the font-size on the html element to 62.5%. I’ve seen this pattern before – it’s so that you can declare font sizes in rems that match a pixel size (E.g. 1.6rem == 16px).

Unfortunately, the Material Design library by Google uses rem as a unit in many places. Personally I think it’s a bad decision because it requires that the html font size is either not set, or is set to 16px.

The best way to solve this is to remove the font-size: 62.5% from the html element. If you do that, all the custom CSS you’ve added should be able to be removed. However, doing so will also require you to change the font sizes on the rest of your theme. If you’re already using a Sass or Less mixin to generate your font sizes (it kind of looks like you might be), then you should just be able to update the calculations in that mixin. Otherwise, I guess you’d have to go through and recalculate the font size manually.

If that’s not an option for you, let me know and I can spend some time helping you fix the issues with custom CSS.

Thanks,
Angus

Hi Angus,
I appreciate your in-depth reply; Thank you! I think in this case (since it’s an older theme that hasn’t been updated since it was first released), the easiest solution would be for me to not use textarea or outlined until a more modern theme is in place. The custom CSS was needed in order to get the form to work on iPhone; Portrait mode. The questions where getting cut off after the first 3 words and/or being hidden behind the fill box.

Des