2 Replies Latest reply on Nov 12, 2008 9:10 AM by Matt Parker

    Inline Combobox

    Matt Parker Newbie

      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>