Question

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.

No correct solution

OTHER TIPS

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top