I want to position the jQuery UI combox. I have more than one but not all of them have to be at the same relative position.
here is my code:
html:
<div>
<select id="comboSubsidiary" class="comboTravel" >
<option>loading</option>
</select>
</div>
<div>
<select id="comboCountry" class="comboWork">
<option>loading</option>
</select>
</div>
css:
div.comboTravel{position: relative; left: 410px; top: -23px; display: inline-block; }
the above css doesn't work.
the following css works:
.ui-combobox{position: relative; left: 110px; top: -23px; display: inline-block; }
.ui-button {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-autocomplete-input {
margin: 0;
padding: 0.3em;
}
but with this css all of the comboboxes were positioned in the same way. I want some comboboxes to use a css class but I don't know how I can access them (e.g. css-class comboTravel or comboWork)
How can I get this to work?
I could see that the div.comboTravel class has a top of -23px, may be this is making the combobox not appear on the screen. I tried removing it and creating another class for comboWork and it works for me. Here is the jsFiddle like [http://jsfiddle.net/nAC8N/2/]
Hope this helps.