Twenty Twelve: Respond Form (input and textarea)

[emiluzelac]

Before submission I tried looking around and could not find anything related, that's why I am creating a ticket.
In case that somehow this was overlooked, I apologize and feel free to close.

Anyways, don't know commands to submit a patch so here's my report:

Respond form is set to 96% and that's good on desktops, however it's not on smaller screens such as
< 768

#respond form input[type="text"], 
#respond form textarea {
    width:96%;
}

Right side of the textarea is cut-off, including the inputs.

Changing width to at least 92% would fix this in all screens, including the 240.

#respond form input[type="text"], 
#respond form textarea {
    width:92%;
}

But this was kind of lame, so here's what I ended up with: (final recommendation)

#respond form input[type="text"], 
#respond form textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

In case that this was already fixed and if you guys didn't include box-sizing, I would highly recommended.

Mac OS X with the latest version of Chrome.

P.S. ​FYI I doubt, but in case that anyone needs more details.

Thanks,
Emil

Thanks!

I meant Twenty Twelve, sorry, still can't get use to that :)

Reproduced in Chrome and FF. @emiluzelac's patch fixes it.

Good catch, Emil!

Very good!

Thanks for the report, Emil.

I'm pretty sure Webkit doesn't need the prefix for box-sizing any more. Also for Obenland, minor nitpick on the patch, make sure property and values in your CSS rules have a space between the colon and value.

Replying to lancewillett:

I'm pretty sure Webkit doesn't need the prefix for box-sizing any more.

You are right, Chrome doesn't need it. I'd like to keep it around ​for Safari though, what do you think?

According to ​http://caniuse.com/#search=box-sizing iOS Safari <= 4.3, Android Browser <= 3.0 and Blackberry browser 7.0 (current) needs the -webkit prefix. Android Browser 2.3 has a usage of 1.75% according the page.

Tested 21916.1.diff​ with Safari 6.0 successfully.
I also resolved the missing space issue. Thanks for the heads up!

Replying to lancewillett:

Thanks for the report, Emil.

I'm pretty sure Webkit doesn't need the prefix for box-sizing any more. Also for Obenland, minor nitpick on the patch, make sure property and values in your CSS rules have a space between the colon and value.

No problem at all. As far as the prefix I see what you're saying, we're doing only the latest browsers, sounds good to me.

In [21897]:

Twenty Twelve: update base style for comment textarea and input elements to avoid clipping off the edges. Props emiluzelac and obenland, fixes #21916.