Just had a quick look and chrome renders both input boxes at width 170px where as FF has a width of 147px, you could force this in your theme override?
#bp-login-widget-user-login.input
I think it was designed to be used in a sidebar and it might look a bit strange on a mobile device without further css.
Thanks @iamthewebb, your hint helped me in the right direction.
You are right, it doesn’t look so well on a mobile device. How can I fix that?
Cheers, Lars
@media rules are useful for having differing css depending on the screen width but I can see you’ve updated it so it should look good over all devices anyway.
Looks good
Yes, I think it looks OK now.
I hid the labels ‘username’ and password’ to save space for the input fields. I would like to add theses labels as placeholder text to them, though – some users might be confused by seeing two empty boxes.
Is there any way I could do that, without editing the widget code?
Thanks,
Lars
.css-class-of-username-input, .css-class-of-password-input {
float: left;
width: 50%;
}
If the inputs have containers then you can also apply padding-right and padding-left to the first and last child.
.username-container {
padding-right: 10px;
}
.password-container {
padding-left: 10px;
}
To add a label as a placeholder wont work, a placeholder should be a hint about what to do with the form field, the label should be used to describe it in part. Additional info about the field can be supplied after the input in a paragraph.
There are some nice examples of animated label elements which could achieve what you are trying to do with css. It would be something like.
.input-container {
position: relative;
}
label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
transition: .2s;
}
input:focus + label {
position: absolute;
top: 0;
left: 0;
}
Hope that helps.
