Question

i have following structure:

<td>
  <input name="foo" size="45"/>
</td>

And i want to dynamically insert image after that and then position it inside input, like this:

$j('<img class="icon-ketchup" style="display: none; position: relative; right: 35px; top: 7px;" src="http://localhost:82/pod/plugin_assets/webshop/images/icons/cross.png" />').show().insertAfter($j('input'));

My td is the same size as input, and I don’t want to resize the td element. How is this possible to achieve ?

Answer 1

You will need to position it with absolute. Javascript is not needed, but can still be used it you want. See http://jsfiddle.net/C7trn/

HTML

<td style="position: relative; border: 2px solid black; padding: 5px;">
<input name="foo" size="45"/>
<img class="icon-ketchup" style="position: absolute; right: 5px; top: 7px;" src="http://localhost:82/pod/plugin_assets/webshop/images/icons/cross.png" />
</td>​

The key is making the TD position: relative; and then having the image position: absolute. This will make the image absolutely positioned relative to the td.