Opened 10 years ago

Closed 9 years ago

#678 closed defect (bug) (fixed)

Email input on .org Jetpack subscription widget overflows container, needs CSS adjustment.

Reported by: mcguive7's profile McGuive7 Owned by: iandunn's profile iandunn
Milestone: Priority: low
Component: Make (Get Involved) / P2 Keywords: has-patch


Sample URL (right sidebar):

The email input in the Jetpack subscription widget in the right sidebar overflows its container and is cut off on the above URL, and possibly others. Jetpack's CSS (/wp-content/plugins/jetpack/modules/subscriptions/subscriptions.css) has the following CSS:

#subscribe-email input {
    width: 95%;
    padding: 1px 2px;

The input padding and border on the input causes it to overflow its container and be cut off. The following CSS rule would fix this issue:

#subscribe-email input {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;

Change History (3)

#1 follow-up: @diddledani
9 years ago

would this be better as a bug filed with JetPack rather than meta?

#2 in reply to: ↑ 1 @iandunn
9 years ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to iandunn
  • Status changed from new to accepted

Replying to diddledan:

would this be better as a bug filed with JetPack rather than meta?

It looks like a conflict between the p2 theme and Jetpack's Subscriptions module, because of the #subscribe-email input rule that Mickey mentioned, and the following rule from p2.

#wrapper form input[type="text"],
#wrapper form input[type="url"],
#wrapper form input[type="email"],
#wrapper form input[type="number"],
#wrapper form input[type="search"],
#wrapper form input[type="password"],
.inlineediting input[type="text"],
.inlineediting input[type="url"],
.inlineediting input[type="email"],
.inlineediting input[type="number"],
.inlineediting input[type="search"],
.inlineediting input[type="password"] {
	border: solid;
	border-width: 1px;
	padding: 5px 7px;

The padding from p2 takes precedence over Jetpack's padding.

I doubt that either project is going to try and support individual themes/plugins, so it's probably just something we should fix in our wporg-p2 child theme.

box-sizing is supported by all modern browsers, so I don't think we need the vendor-prefixed rules.

The problem affects almost all input fields in the sidebar with width: 100%, though, not just the subscription widget. The search input isn't affected because it has additional rules on it. So, the solution should work for all inputs too, not just the subscription input.

Just adding the box-sizing rule to the selectors above should do the trick.

For simple fixes like this, pasting the solution into the ticket description or a comment is enough, we don't need an actual patch.

#3 @iandunn
9 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 2234: P2 child theme: Prevent sidebar input fields from overflowing.

Fixes #678
Props McGuive7

Note: See TracTickets for help on using tickets.