3

I wat to run a jquery-ui effect called "shake" on a input tag:

$("#myInput").effect("shake");

I gave the input tag a new size in the included css file:

height: 25px;
width: 250px;

The effect runs fine, but during the effect, the input tag has the default size until the effect is over. Then, it gets big again.

Where is the error? Is it a bug in jquery-ui?

enter image description here

picture during the effect.

Oath Comrade
  • 283
  • 2
  • 9
  • 2
    I think it's some problem with the way jquery-ui applies effects, namely by wrapping the target in a temporary container div. I've had the same trouble before, and never found a solution. – ElendilTheTall Feb 06 '14 at 16:37
  • Can you reproduce that in jsfiddle ... This seems to work fine for me http://jsfiddle.net/qhK96/ in Chrome. – DaniP Feb 06 '14 at 16:39
  • It is very strange but your fiddle works, I do not see a real difference in my code… but that i store the input in a var. But I tested that in fiddle and it worked the same. – Oath Comrade Feb 06 '14 at 16:58
  • can you share the fiddle you were able to reproduce it in? or were you saying 'the same' means working – O'Mutt Feb 06 '14 at 18:52
  • I think my fiddle is not helping, because I copied Danko's fiddle in my file and went to it in safari 7.0.1 and firefox 26.0 and get the strange behavior. In the fiddle itself it works like a charm. When the effect starts, the input field breaks to newline and gets like the half of it's height, even if I don't change the default height in css. I posted a picture above. – Oath Comrade Feb 06 '14 at 23:47

2 Answers2

0

Most likely it is due to a different CSS Style getting precedence during the effect. See http://jsfiddle.net/qhK96/1/ where the background turns red during the shake animation.

div > input /* while not in animation */

div > div > input /* while in animation due to wrapping from jQuery, like ElendilTheTall said */

Solution is easy: Fix your css. Sounds a little smartassy, sorry, but we would need more info to point you to your problem. As a first try add !important to yout style definition height or try setting height with line-height.

Armin
  • 184
  • 1
  • 9
  • No it is not the css. If I do not even use css, the problem still remains. I can't give more information because the fiddle code (posted above) works on the fiddle site but not, when I copy it in a local file and call it in a browser. – Oath Comrade Feb 07 '14 at 00:07
0

I just had the same problem and found the solution. And yes, I agree with ElendilTheTall that Jquery UI does wrap the target and change the dimensions as long as the effect is in progress. So, the solution is simple. Just fix the height and width of the HTML element by adding "!important" in the CSS. Just that. Jquery UI won't be able to change the dimensions.

Pulkit Pithva
  • 152
  • 1
  • 12