Implementing multiple combo boxes results in only one drop down button

Question

Using the code here : http://jqueryui.com/autocomplete/#combobox But replacing id with a class results in almost the desired functionality... except there is only drop down button for all combox box's. How to get a drop down button for each combobox ?

<div class="ui-widget" style="display: inline-block;" >
  <select id="tag01" class="comboBox">
    <option value="">Select one...</option>
      <c:forEach items="${allTags}" var="tag">
        <option value="${tag.title}">${tag.title}</option>
      </c:forEach>
   </select>
</div>
<div class="ui-widget" style="display: inline-block;" >
  <select id="tag02" class="comboBox">
    <option value="">Select one...</option>
    <c:forEach items="${allTags}" var="tag">
      <option value="${tag.title}">${tag.title}</option>
    </c:forEach>
  </select>
</div>

and then calling comboxbox like so :

 $("#tag01").combobox();
 $("#tag02").combobox();

or

 $(".comboBox").combobox();

results in only one drop down button. Only if I remove display inline block from style of divs do I get multiple buttons, but then the combox boxs are on multiple lines - I do not want this.

Answer 1

The drop down button is absolutely positioned, which means it does not impact the normal flow of the page. When you add the second combo box, the combination with position: relative in the container element leads to a box stacked on top of the button. Leaving some space on the right of the .ui-widget elements solves the problem.

For example,

<div class="ui-widget" style="display: inline-block; margin-right:40px">
  <select id="tag01" class="comboBox">
    ...
   </select>
</div>

See http://jsfiddle.net/YH3ep/3/ for a demo