Inline Combobox
red247 Nov 11, 2008 2:38 PMI'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>