CODEWITHSUNDEEP
cssjquery-ui
Raoul
Raoul

Reputation: 3889

jQuery UI - icon alignment

In the following example, I'm trying to get the text, input box and icon to align without over lapping.

http://jsfiddle.net/zGZM7/2/

Is there some css I'm missing?

Thanks

Edit, sadly I need a solution which will work with FF and IE6 :(

Upvotes: 4

Views: 4817

Answers (2)

jargalan
jargalan

Reputation: 5184

Split them in different tds

<table>
    <tr>
        <td>Foo</td>
        <td><input type=text id=Foo class=textInput></td>
        <td><a href="#" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></a></td>
    </tr>
</table>

or

add style float:left to the input

<td>
  <input type=text id=Foo class=textInput style="float:left">
  <a href="#" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></a>
</td>

or like Niklas's idea

 .ui-icon {float: right; margin: 0 2px;}

Upvotes: 0

Niklas
Niklas

Reputation: 30002

You have a lot of irrelevant CSS in your fiddle and the only relevant bit isn't getting called as it in your example requires to be under a ul with id #icons. Removing the ul#icons with the following:

.ui-icon {float: left; margin: 0 4px;}

Should make it work as you described.

example:
http://jsfiddle.net/niklasvh/kTFw7/

Upvotes: 7

Related Questions