WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#21916 closed defect (bug) (fixed)

Twenty Twelve: Respond Form (input and textarea)

Reported by: emiluzelac Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

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

Attachments (2)

21916.diff (618 bytes) - added by obenland 3 years ago.
21916.1.diff (585 bytes) - added by obenland 3 years ago.

Download all attachments as: .zip

Change History (16)

comment:1 @emiluzelac3 years ago

  • Component changed from Themes to Bundled Theme
  • Version 3.4.2 deleted

comment:2 @emiluzelac3 years ago

  • Keywords needs-patch added; reporter-feedback removed

comment:3 @obenland3 years ago

  • Milestone changed from Awaiting Review to 3.5
  • Summary changed from Twenty Eleven: Respond Form (input and textarea) to Twenty Twelve: Respond Form (input and textarea)

@obenland3 years ago

comment:4 @emiluzelac3 years ago

Thanks!

comment:5 @emiluzelac3 years ago

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

comment:6 @obenland3 years ago

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

Good catch, Emil!

comment:7 @obenland3 years ago

  • Keywords has-patch added; needs-patch removed

comment:8 @emiluzelac3 years ago

Very good!

comment:9 follow-ups: @lancewillett3 years ago

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.

comment:10 in reply to: ↑ 9 @obenland3 years ago

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?

comment:11 @Jayjdk3 years ago

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.

Last edited 3 years ago by Jayjdk (previous) (diff)

@obenland3 years ago

comment:12 @obenland3 years ago

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

comment:13 in reply to: ↑ 9 @emiluzelac3 years ago

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.

comment:14 @lancewillett3 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.