Make WordPress Core

Opened 10 years ago

Last modified 7 years ago

#27307 new defect (bug)

Text Widget size spill over the side of Widget Container in random width.

Reported by: rdall's profile RDall Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 3.8.1
Component: Widgets Keywords: has-patch needs-testing dev-feedback
Focuses: Cc:


About 75 percent of the time when I add a text widget item to a widget area. The widget spills over the left side of the area. See Screenshot

What is odd about this is that it only happens sometimes and it has randomly width that it spills over as well. See additional screenshot.

If you expand the browser window the widget size actually expands as well. But seems to keep what ever margin it had on the left constant. Have another screenshot here from my trunk build.

I tried a search in Widgets for trac and couldn't find anything related. If this is proper UI for widgets it does seem a little random to me.

Attachments (1)

27307.diff (864 bytes) - added by dingo_bastard 7 years ago.
Removed unnecessary code

Download all attachments as: .zip

Change History (6)

#1 @westonruter
10 years ago

Such, it seems, is the nature of wide widget controls: they inherently don't feel right in the current UI.

The Text widget control is registered as having a 400px width:

$control_ops = array('width' => 400, 'height' => 350);

It seems that the responsive admin is now causing wide widget controls to not have consistent widths because the sidebar-columns can now have dynamic widths. The reason that wide widget controls (like the Text widget) always overhang the left of the container even when the container is larger than the widget control's specified width, is that the overhang is currently implemented via a negative left/right margin:

if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
	if ( widget.closest('div.widget-liquid-right').length ) {
		margin = isRTL ? 'margin-right' : 'margin-left';
	} else {
		margin = isRTL ? 'margin-left' : 'margin-right';

	css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';
	widget.css( css );

This makes the resulting widget control width relative to the width of the container.

#2 @RDall
10 years ago

Last edited 10 years ago by RDall (previous) (diff)

#3 @jeremyfelt
10 years ago

  • Version changed from trunk to 3.8.1

I seem to get this behavior 100% of the time in Chrome 33 on OSX. Seems to exist in 3.8 as well.

I don't think this is a bug per se, but something that may need to continue to evolve over time with wide widgets.

#4 @chriscct7
9 years ago

  • Keywords needs-patch added

7 years ago

Removed unnecessary code

#5 @dingo_bastard
7 years ago

  • Keywords has-patch needs-testing dev-feedback added; needs-patch removed

I added a patch in which I removed the unnecessary code. I tested this in the latest WP version (4.8-RC1-40846-src) and it seems to be working (on Mac OS). Don't know the purpose of that code tbh...

Last edited 7 years ago by dingo_bastard (previous) (diff)
Note: See TracTickets for help on using tickets.