I'm using richfaces 3.2.1.GA.

I've been trying to render a combobox inline within a richfaces toolbar. When the combobox is displayed, it is placed on a new line. From what I can tell, the combobox uses a div to display the combobox, which I haven't been able to set to inline via CSS. Does anyone have a work around for this? The xhtml markup consists of two tags, the label and the combobox.

 <h:outputText value="EM Type" style="vertical-align:middle; display:inline;"/>
 <rich:spacer width="2px"/>

 <rich:comboBox id="emType" value="#{display.emType}" inputStyle="display:inline;">
 <f:selectItems value="#{emTypeList.values}" />
 </rich:comboBox>
 <rich:spacer width="4px"/>

The tag, EM Type, displays perfectly fine. The richfaces:comboBox tag places the control on a new line. The code starts at the following tag:

<div id="ChangeDatesForm:emType">

This is what I think is causing the problem. I have tried add some CSS to my page the resembles the following:

div#ChangeDatesForm:emType { display:inline; }

but that didn't seem to fix it.

Any help would be greatly appreciated.

<span style="vertical-align:middle; display:inline;">EM Type</span>
<img class="rich-spacer " height="1" id="ChangeDatesForm:j_id35" src="/bap/a4j_3_2_1-SNAPSHOTimages/spacer.gif" width="2px" />
<div id="ChangeDatesForm:emType">
 <div class="rich-combobox-font rich-combobox " id="ChangeDatesForm:emTypecombobox" style="width:150px;display: inline;">
 <div class="rich-combobox-list-cord"></div>
 <div class="rich-combobox-font rich-combobox-shell" style="width:150px;">
 <input autocomplete="off" class="rich-combobox-font-disabled rich-combobox-input-inactive " id="ChangeDatesForm:emTypecomboboxField" name="ChangeDatesForm:emTypecomboboxField" style="width:140px; " type="text" />
 <input class="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive" id="ChangeDatesForm:emTypecomboBoxButtonBG" readonly="true" type="text" />
 <input class="rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive " id="ChangeDatesForm:emTypecomboboxButton" readonly="true" style="; background-image: ;" type="text" />
 <div class="rich-combobox-strut rich-combobox-font" style="width:140px">Strut</div>
 </div>
 <div class="rich-combobox-list-cord " id="ChangeDatesForm:emTypelistParent" style="display:none; ; position:absolute;">
 <div class="rich-combobox-shadow">
 <table border="0" cellpadding="0" cellspacing="0" id="ChangeDatesForm:emTypeshadow">
 <tr>
 <td class="rich-combobox-shadow-tl">
 <img border="0" height="1" src="/bap/a4j_3_2_1-SNAPSHOTimages/spacer.gif" width="10" />
 <br />
 </td>
 <td class="rich-combobox-shadow-tr">
 <img border="0" height="10" src="/bap/a4j_3_2_1-SNAPSHOTimages/spacer.gif" width="1" />
 <br />
 </td>
 </tr>
 <tr>
 <td class="rich-combobox-shadow-bl">
 <img border="0" height="10" src="/bap/a4j_3_2_1-SNAPSHOTimages/spacer.gif" width="1" />
 <br />
 </td>
 <td class="rich-combobox-shadow-br">
 <img border="0" height="10" src="/bap/a4j_3_2_1-SNAPSHOTimages/spacer.gif" width="10" />
 <br />
 </td>
 </tr>
 </table>
 </div>
 <div class="rich-combobox-list-position" id="ChangeDatesForm:emTypelistPosition">
 <div class="rich-combobox-list-decoration" id="ChangeDatesForm:emTypelistDecoration">
 <div class="rich-combobox-list-scroll" id="ChangeDatesForm:emTypelist">
 <span class="rich-combobox-item rich-combobox-item-normal">EM000</span>
 <span class="rich-combobox-item rich-combobox-item-normal">EM001</span>
 <span class="rich-combobox-item rich-combobox-item-normal">EM002</span>
 <span class="rich-combobox-item rich-combobox-item-normal">EM003</span>
 <span class="rich-combobox-item rich-combobox-item-normal">EM004</span>
 <span class="rich-combobox-item rich-combobox-item-normal">EM005</span>
 </div>
 </div>
 </div>
 </div>
 <input id="ChangeDatesForm:emTypecomboboxValue" name="ChangeDatesForm:emType" type="hidden" />
 </div>
 <script type="text/javascript">var clientId = 'ChangeDatesForm:emType';
 RichComboUtils.execOnLoad( function(){
 Richfaces.ComboBox.CLASSES = {
 BUTTON : {CLASSES :
 {NORMAL : "rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive ",
 ACTIVE : "rich-combobox-font rich-combobox-button-icon rich-combobox-button ",
 DISABLED : "rich-combobox-font-disabled rich-combobox-button-icon-disabled rich-combobox-button-disabled ",
 HOVERED : "rich-combobox-button-hovered"},
 STYLE :
 {NORMAL: "",
 ACTIVE: "",
 DISABLED: ""}
 },
 BUTTONBG : {CLASSES :
 {NORMAL:"rich-combobox-font-inactive rich-combobox-button-background-inactive rich-combobox-button-inactive",
 ACTIVE: "rich-combobox-font rich-combobox-button-background rich-combobox-button",
 DISABLED : "rich-combobox-font-disabled rich-combobox-button-background-disabled rich-combobox-button-disabled"}
 },
 BUTTONICON : {STYLE :
 {NORMAL: "",
 ACTIVE: "",
 DISABLED: ""}
 },
 FIELD : {CLASSES:
 {NORMAL : "rich-combobox-font-inactive rich-combobox-input-inactive ",
 ACTIVE : "rich-combobox-font rich-combobox-input ",
 DISABLED : "rich-combobox-font-disabled rich-combobox-input-disabled "},
 STYLE :
 {NORMAL : "",
 ACTIVE : "",
 DISABLED : ""}
 },
 COMBO_LIST : {
 LIST : {CLASSES :{ACTIVE : "rich-combobox-list-cord rich-combobox-list-scroll rich-combobox-list-decoration rich-combobox-list-position "},
 STYLE : {ACTIVE: ""}
 },
 ITEM : {NORMAL : "rich-combobox-item ",
 SELECTED : "rich-combobox-item rich-combobox-item-selected "
 }
 }
 }

 var combobox = new Richfaces.ComboBox( "ChangeDatesForm:emType",
 "ChangeDatesForm:emTypelist",
 "ChangeDatesForm:emTypelistParent",
 "ChangeDatesForm:emTypecomboboxValue",
 "ChangeDatesForm:emTypecomboboxField",
 "ChangeDatesForm:emTypecomboboxButton",
 "ChangeDatesForm:emTypecomboBoxButtonBG",
 "ChangeDatesForm:emTypeshadow",
 Richfaces.ComboBox.CLASSES,
 "150px", "200px",
 ['EM000','EM001','EM002','EM003','EM004','EM005'] ,
 false,
 true,
 true,
 null,
 null,
 "",
 false, '',
 0, 0);
 }, RichComboUtils.Condition.ElementPresent("ChangeDatesForm:emType"), 100);
 </script>
</div>