Skip to main content

Search and Top Navigation

#8867 closed bug (fixed)

Opened November 29, 2012 12:00PM UTC

Closed December 10, 2014 10:00PM UTC

Effects-Shake: Select element with padding breaks in 1.9.2

Reported by: abacada Owned by: mikesherov
Priority: minor Milestone: 1.12.0
Component: ui.effects.* (individual effect) Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

Using google chrome 23.0.1271.91

1 - Click the button.

2 - The shake effect occurs normally in the select element.

http://jsfiddle.net/Jqpcw/2/ - 1.8.9

1 - Click the button.

2 - The shake effect reduces the original size of the select.

3 - Expected: No changes are made to the select element.

http://jsfiddle.net/Jqpcw/1/ - 1.9.2

This is probably related to #5245.

I can't figure if this is a jquery or jquery ui bug.

Attachments (0)
Change History (13)

Changed November 29, 2012 06:17PM UTC by scottgonzalez comment:1

component: ui.coreui.effects.* (individual effect)
status: newopen

Changed December 03, 2012 06:09PM UTC by abacada comment:2

Any news on this one?

Changed December 07, 2012 06:27PM UTC by abacada comment:3

For anyone interested I have made an workaround to this bug. It restricts the height/width change when using the "Shake" effect, kind of hacky but at least passes in all /effects/effects.html tests.

Should be removed when fixed.

#!div
  {{{#!js
  if ( $.ui ) {
		(function() {
			var oldEffect = $.fn.effect;
			$.fn.effect = function( effectName ) {
				if ( effectName === "shake" ) {
					var old = $.effects.createWrapper;
					$.effects.createWrapper = function( element ) {
						var result;
						var oldCSS = $.fn.css;
						
						$.fn.css = function( size ) {
							var _element = this;
							var hasOwn = Object.prototype.hasOwnProperty;
							return _element === element
									&& hasOwn.call( size, "width" )
									&& hasOwn.call( size, "height" )
									&& _element || oldCSS.apply( this, arguments );
						};
						
						result = old.apply( this, arguments );
						
						$.fn.css = oldCSS;
						return result;
					};
				}
			return oldEffect.apply( this, arguments );
			};
		})();
	}
  

}}}

Changed December 08, 2012 06:11PM UTC by mikesherov comment:4

owner: → mikesherov
status: openassigned

This is most likely another side effect of the difference between .css("height") and .height() for border-box elements, and also a browser quirk in webkit regarding default margins for select elements. I'll investigate.

Changed January 13, 2013 10:30PM UTC by mikesherov comment:5

this is effecting the demo for sure: https://github.com/necolas/normalize.css/issues/126

Changed January 23, 2013 02:46AM UTC by abacada comment:6

But not as bad as the select element. Any news on it?

Changed January 23, 2013 04:28AM UTC by mikesherov comment:7

Yes, good progress has been made on the effects rewrite and it comes down to a crazy bug I discovered in WebKit: https://bugs.webkit.org/show_bug.cgi?id=107380

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:8

milestone: 1.10.0none

Changed March 13, 2013 09:50PM UTC by ckn comment:9

This seems to be somehow related to box-sizing, when I add box-sizing:content-box to your fiddle it works fine. http://jsfiddle.net/bkeva/

Changed April 02, 2013 11:48AM UTC by abacada comment:10

Of course.

But box-sizing: border-box is the most practical use, although the spec does not consistently applies to every known element (as it should).

Let's say one want to apply 100% width to an input inside a relative container, the only way to use the minimun amount of code for such common behavior is to code with border-box, instead of calculating the border (which is a pain).

The following style should work for every jquery UI component:

  * {
    box-sizing: border-box;
  }

Changed September 30, 2013 10:38PM UTC by feedbloo comment:11

_comment0: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. \ \ I think I am facing the same problem. When I click in a button to shake it, the effect() function is completely replacing the class attribute for the button, which in my case causes the element to lose current width, height, etc. \ \ Maybe the solution is change the effect() function to append the ui-effects-wrapper class and not replace the entire value of class attribute. \ \ Marcelo1380581836968284
_comment1: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the CSS padding property is wrongly defined to 0px. \ \ Since the button have padding applied in all sides, the wrapper element created should adopt the same padding properties. \ \ Marcelo1380583291743601
_comment10: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like this below should be add inside the createWrapper() function: \ \ var \ \ borders = parseFloat($wrappedElem.css('border-width').replace('px')) * 2, \ \ horizPadding = parseFloat($wrappedElem.css('padding-left').replace('px')) + parseFloat($wrappedElem.css('padding-right').replace('px')) + borders, \ \ vertPadding = parseFloat($wrappedElem.css('padding-top').replace('px')) + parseFloat($wrappedElem.css('padding-bottom').replace('px')) + borders; \ \ \ $wrapper.css('height', $wrappedElem.height() + vertPadding); \ \ $wrapper.css('width', $wrappedElem.width() + horizPadding); \ \ \ I have changed the createWrapper() with that code and worked perfectly. \ \ \ Cheers, \ \ Marcelo1380601222319942
_comment2: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var horizPadding = parseFloat(parent.css('padding-left').replace('px')) + parseFloat(parent.css('padding-right').replace('px')); \ var vertPadding = parseFloat(parent.css('padding-top').replace('px')) + parseFloat(parent.css('padding-bottom').replace('px')); \ \ wrapper.height = parent.height +vertPadding; \ wrapper.width = parent.width +horizPadding; \ \ Cheers, \ Marcelo1380583330367044
_comment3: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var horizPadding = parseFloat(parent.css('padding-left').replace('px')) + parseFloat(parent.css('padding-right').replace('px')); \ \ var vertPadding = parseFloat(parent.css('padding-top').replace('px')) + parseFloat(parent.css('padding-bottom').replace('px')); \ \ wrapper.height = parent.height +vertPadding; \ \ wrapper.width = parent.width +horizPadding; \ \ \ Cheers, \ Marcelo1380584093329987
_comment4: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var \ \ horizPadding = parseFloat(e.css('padding-left').replace('px')) + parseFloat(e.css('padding-right').replace('px')) + 2, \ \ vertPadding = parseFloat(e.css('padding-top').replace('px')) + parseFloat(e.css('padding-bottom').replace('px')) + 2; \ \ wrapper.height = parent.height +vertPadding; \ \ wrapper.width = parent.width +horizPadding; \ \ \ Cheers, \ Marcelo1380584124447083
_comment5: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var \ \ horizPadding = parseFloat(e.css('padding-left').replace('px')) + parseFloat(e.css('padding-right').replace('px')) + 2, \ \ vertPadding = parseFloat(e.css('padding-top').replace('px')) + parseFloat(e.css('padding-bottom').replace('px')) + 2; \ \ wrapper.height = parent.height +vertPadding; \ \ wrapper.width = parent.width +horizPadding; \ \ \ Cheers, \ Marcelo1380584147382564
_comment6: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var \ \ horizPadding = parseFloat(e.css('padding-left').replace('px')) + parseFloat(e.css('padding-right').replace('px')) + 2, \ \ vertPadding = parseFloat(e.css('padding-top').replace('px')) + parseFloat(e.css('padding-bottom').replace('px')) + 2; \ \ wrapper.height = parent.height + vertPadding; \ \ wrapper.width = parent.width + horizPadding; \ \ \ Cheers, \ Marcelo1380585473481776
_comment7: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var \ \ borders = parseFloat(e.css('border-width').replace('px')) * 2, \ \ horizPadding = parseFloat(e.css('padding-left').replace('px')) + parseFloat(e.css('padding-right').replace('px')) + borders, \ \ vertPadding = parseFloat(e.css('padding-top').replace('px')) + parseFloat(e.css('padding-bottom').replace('px')) + borders; \ \ \ wrapper.height = parent.height + vertPadding; \ \ wrapper.width = parent.width + horizPadding; \ \ \ Cheers, \ Marcelo1380585596681575
_comment8: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var \ \ borders = parseFloat(e.css('border-width').replace('px')) * 2, \ \ horizPadding = parseFloat(e.css('padding-left').replace('px')) + parseFloat(e.css('padding-right').replace('px')) + borders, \ \ vertPadding = parseFloat(e.css('padding-top').replace('px')) + parseFloat(e.css('padding-bottom').replace('px')) + borders; \ \ \ wrapper.height = parent.height + vertPadding; \ \ wrapper.width = parent.width + horizPadding; \ \ \ I have changed the createWrapper() with this code above and worked very well. \ \ \ Cheers, \ \ Marcelo1380585941662728
_comment9: Hey guys, \ \ I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem. \ \ When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button. \ \ So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height. \ \ Something like that should be add in the createWrapper() function: \ \ var \ \ borders = parseFloat(parentElem.css('border-width').replace('px')) * 2, \ \ horizPadding = parseFloat(parentElem.css('padding-left').replace('px')) + parseFloat(parentElem.css('padding-right').replace('px')) + borders, \ \ vertPadding = parseFloat(parentElem.css('padding-top').replace('px')) + parseFloat(parentElem.css('padding-bottom').replace('px')) + borders; \ \ \ wrapper.height = parentElem.height + vertPadding; \ \ wrapper.width = parentElem.width + horizPadding; \ \ \ I have changed the createWrapper() with this code above and worked very well. \ \ \ Cheers, \ \ Marcelo1380601133645211

Hey guys,

I am using $1.9.1 and $UI 1.10.2. I think I am facing the same problem.

When I click in a button to shake it, the effect() function creates a wrapper for the button, but the wrapper created is not inheriting in its width and height an eventually padding value from the button.

So, the wrapper element created should compute the parent padding values: padding-left + padding-right applied to the wrapper width and padding-top + padding-bottom applied to the wrapper height.

Something like this below should be add inside the createWrapper() function:

var

borders = parseFloat($wrappedElem.css('border-width').replace('px')) * 2,

horizPadding = parseFloat($wrappedElem.css('padding-left').replace('px')) + parseFloat($wrappedElem.css('padding-right').replace('px')) + borders,

vertPadding = parseFloat($wrappedElem.css('padding-top').replace('px')) + parseFloat($wrappedElem.css('padding-bottom').replace('px')) + borders;

$wrapper.css('height', $wrappedElem.height() + vertPadding);

$wrapper.css('width', $wrappedElem.width() + horizPadding);

I have changed the createWrapper() with that code, now things are up and running well.

Cheers,

Marcelo

Changed November 18, 2014 06:41PM UTC by mikesherov comment:12

milestone: none1.12.0

Changed December 10, 2014 10:00PM UTC by Mike Sherov comment:13

resolution: → fixed
status: assignedclosed

Effects: Rewrite

1. Introduces a set of helper methods to easily create and define new effects.

2. Uses clip animations and placeholders instead of wrappers for clip effects.

3. Ensures all animations are detectable as animated

Fixes #10599

Fixes #9477

Fixes #9257

Fixes #9066

Fixes #8867

Fixes #8671

Fixes #8505

Fixes #7885

Fixes #7041

Closes gh-1017

Changeset: b6bec797d6a8ef0b377a866c38c67e66a626b45f