WordPress.org

Make WordPress Core

Opened 6 years ago

Last modified 2 years ago

#27307 new defect (bug)

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

Reported by: 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:
PR Number:

Description

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 http://cl.ly/image/3Y363s242a3y

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. http://cl.ly/image/3H3X371R0n3l

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. http://cl.ly/image/3E203q083Z3V

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 2 years ago.
Removed unnecessary code

Download all attachments as: .zip

Change History (6)

#1 @westonruter
6 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);

https://core.trac.wordpress.org/browser/trunk/src/wp-includes/default-widgets.php?rev=27443#L395

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 );
}

https://core.trac.wordpress.org/browser/trunk/src/wp-admin/js/widgets.js?rev=27443#L43

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

#2 @RDall
6 years ago

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

#3 @jeremyfelt
6 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
4 years ago

  • Keywords needs-patch added

@dingo_bastard
2 years ago

Removed unnecessary code

#5 @dingo_bastard
2 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 2 years ago by dingo_bastard (previous) (diff)
Note: See TracTickets for help on using tickets.