JQuery UI slide effect creates a new line

Question

I want to enable the effect for my web application when the user clicks the "Change" icon and the text box elegantly slides horizontally right to the right of the icon. It is currently being put forward, but not very elegantly, because when I click on the icon for some reason, a new line is created in the browser below, where I clicked (and all the content below is sketched). The text window opens and then bizarrely jumps back to where I originally wanted it to go, and the new line created disappears.

Please note, however, that if I put the text field on my own line so that it is completely aligned to the left edge of the field, it works fine. But I want him 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 corresponding 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 float: left on both elements.

http://jsbin.com/uzoqo

edit: for some reason this works, but if you try to edit it, it will not show my changes in the code. not sure what happened.

Answer 2

, , . , jQuery , , .

- .