JQuery UI slide effect creates a new line

Question

I want to enable an effect on my web app where a user clicks an "Edit" icon and a text box elegantly slides out horizontally immediately to the right of the icon. Currently it is sliding out, but not very elegantly, because when I click on the icon for some reason a new row is created in the browser below where I clicked (and all content below is bumped down). The text box slides out, and then bizarrely jumps back up to where I originally wanted it to go, and the new row created disappears.

Please note, however, that if I put the textbox on its own line so that it is fully left-justified against the margin, that it works just fine. But I want it to scroll it to the right of the icon.

This behavior is the same for IE8 and Firefox.

Here is the HTML:

<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/>
<span id="AddText" style="display:none">
    <input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" />
</span>

And here is the relevant Javascript:

function toggleNotebox() {
    var options = {};
    $('#AddText').toggle('slide', options, 500);
 }

Here is the jsbin.com URL to see this behavior in action: http://jsbin.com/alopu/edit

Answer 1

Try putting a float: left on both elements.

http://jsbin.com/uzoqo

edit: for some reason the above works but if you try to edit it it doesn't show my changes to the code. not sure what happened.

Answer 2

Inline elements, which spans and inputs are by default, don't honour explicit widths. So jQuery's either changing the display of the animated element to block, or wrapping it in a block element so that that element can be animated.

That's why Samuel's change works - floated elements honour widths.