Question

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?

Answer 1

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.