Woocommerce – Check-out invisible text in fields (Firefox)

[cbiger]

Hey,

A quick one someone reported to me today (and which I did manage to reproduce):

When checking-out and being prompted to fill out the form, filling it… works, but while doing it it looks as though it keeps on being empty (ie “text is invisible) (checked out it was working with a little ctrl-a ctrl-c in a field then pasting it somewhere: text is there).

This occurs in FF (21) but not on either Chrome or IE (9).

My guess would be that it is a rendering issue (issue with padding? height? other? :/) but I did not dive into the code.

Surprised it has never been mentioned here… but I cannot see anything I did that might have caused this browser-related issue.

Thanks,

[cbiger]

This reply has been marked as private.

[LADave]

Same issue. Also text is halfway cutoff in opera. Definitely padding/layer issue.

[LADave]

I had to override the vertical padding the theme adds in styles.css

Changing from

.woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea {
padding: 14px 6px;

to

.woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea {
padding: 4px 6px;

worked for me.

[LADave]

Actually had to go to 2px. Internet explorer was having issues with 4px though it was fine at 14px. Weird.

[foodfreaks]

Hi,
I reported the same issue on 14. June (Woocommerce Checkout page text invisible using Firefox). Is ther any solution planned for the next update?
Christian

[LADave]

2 px works in Firefox/IE/Opera for me. Haven’t tested Safari. An official fix would be better, but that would still be fixing the padding on the textbox. So until the fix is in just add this code to your overrides in theme options and your all set.


.woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea {
padding: 2px 6px;

[Ben – SUPPORT]

Hey everyone, sorry you’ve been having this issue if you add

.woocommerce-page form .form-row input.input-text{
padding: 2px 6px;
height: 30px;
}
.woocommerce-page form .form-row textarea{
padding:2px 6px;
}

To Custom CSS in general settings it’ll be fixed

I’ll see if I can get Ed in here for a fix within the theme for everyone, thank you for bringing this to our attention.

Thanks
Ben

[Swift Ideas – Ed]

Added this for the next update – thanks guys!

– Ed