htmlcss

How to position this spinner in a td

I would like to do this (see picture):

enter image description here

I have this for the moment:

enter image description here

My html code is:

<td data-sort-initial="true" data-value="azerty" style="padding:5px;">
    <input class="form-control input-sm edit2" data-nom_champ="contact_label" data-id_ecole_contact="9" name="contact_label" type="text" value="azerty">
    <i class="fa fa-spinner fa-spin" id="waiting_9" style="display:none;position:relative;left:0px;top:2px;"></i>
</td>

I can modify the top and left values, but is it the right method ? Is it because I am in a td element that it does not work ? Should I place a div instead ?

Solution

  • Just set the td style to be

    position: relative;

    and change to i style to:

    position: absolute; right: 6px; top: 4px;

    final code will look like this:

    <table>
    <tr>
        <td style="position:relative">
          <input type="text"/>
          <i class="fa fa-spinner fa-spin" id="waiting_9" style="display:none;position: absolute; right: 6px; top: 4px;"></i>
        </td>
    </tr>
</table>

    fiddle: https://jsfiddle.net/d1xasmLd/9/