jQuery UI shake effect starts on new line

Question

On the jsfiddle link provided below, I have a paragraph with text, and then an input box. I use jQuery UI to shake the input box, but bizarrely the shake effect starts one line below the text.

http://jsfiddle.net/VQj2Z/6/

Answer 1

if you check source code during the effect, you see that the input is wrapped by <div class="ui-effects-wrapper"> and this is why it folds to next line. I am not familiar with mootools, but quick'n'dirty fix would be to assign display:inline to that div:

<style type="text/css">
    .ui-effects-wrapper {
        display:inline;
    }
</style>

Answer 2

Since there's not enough room (it's dynamically wrapped in a div) for the input to shake while "inline", it wraps to the next line and just goes back when it's done.

Put the text and the input into block level elements (floating side-by-side div's) and everything stays in place.

http://jsfiddle.net/VQj2Z/10/

Also note that I removed </input> as there's no such thing. <input is simply closed with a />

Answer 3

For my use case, I just added these attributes to the class of the containing div:

overflow:    visible;
white-space: nowrap;

I figured the situation causing the whitespace wrapping was probably only a few pixels, so why not let the horizontal overflow slightly go over and then force it not to wrap? For my use case, this seemed to be the minimally invasive approach since the text was supposed to be on only one line anyway.