Dropdown Fields placeholder on signup page clashes with (select an option) text on mobile

bug
1

I’ve just gone to test our signup process via mobile in anticipation of a large number of signups this week.

On mobile, field name on dropdown fields is displayed over the top of the (select an option) text:

72448df20fe3c38bbfe2f0e8008ab781f225fd71
72448df20fe3c38bbfe2f0e8008ab781f225fd711137×319 7.74 KB

I think that it is meant to be placed several pixels higher to get it out of the way like this:

image

Unfortunately, this also obscures the options that the user selects, making signup via mobile a very awkward experience when you have several user-custom-fields.

This is the same with all themes/components turned off.

Here is a CSS patch which has got me through:

// temporary fix of dropdown and multiselect labes
.create-account #login-form .input-group .user-field.dropdown label.control-label.alt-placeholder {
    top:-8px!important;
}
.create-account #login-form .input-group .user-field.multiselect label.control-label.alt-placeholder {
    top:-8px!important;
}
2 Likes