4 Replies Latest reply on Feb 12, 2010 11:51 AM by Ilya Shaikovsky

    Can you skin an <h:inputText> <button> to look like a comboBox?

    Tanya Ruttenberg Expert

      The ultimate goal is to make my suggestionBox look like a comboBox.

       

      I've been trying to apply rich-combobox-button classes and variations there on to the <button> tag and so far  have been unsuccessful.

       

      Anyone know exactly how to do this?

        • 1. Re: Can you skin an <h:inputText> <button> to look like a comboBox?
          Tanya Ruttenberg Expert

          Here is my code

           

             <s:decorate template="layout/display.xhtml">
               <ui:define name="label">#{messages['ond.label.type']}</ui:define>
                  <h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0">
                     <h:inputText id="it8" value="#{siteTypes.siteType}" />
                     <button
                          onclick="#{rich:component('s10')}.callSuggestion(true)"
                          style="height: 20px; width: 20px;"
                          class="rich-combobox-button-icon-inactive rich-combobox-button-icon rich-combobox-button" />
                  </h:panelGrid>
                  <rich:suggestionbox id="s10"
                        suggestionAction="#{officeTypesList.suggest}"
                        var="_officetype" fetchValue="#{_officetype.inputValue}"
                        for="it8" nothingLabel="Office Type not found">
                        <h:column>
                          <h:outputText value="#{_officetype.officeType}" />
                        </h:column>
                        <h:column>
                          <h:outputText value="#{_officetype.description}" />
                        </h:column>
                  </rich:suggestionbox>
              </s:decorate>

           

           

          When I use the developer toolbar to look at the CSS associated with this element, the CSS for the combox classes does not seem to be applied though the element has the classes defined on it.

          • 2. Re: Can you skin an <h:inputText> <button> to look like a comboBox?
            Ilya Shaikovsky Master
                  <rich:comboBox defaultLabel="Enter some value" valueChangeListener="#{userBean.listener}">
                            <f:selectItem itemValue="suggestion 1"/>
                            <f:selectItem itemValue="suggestion 2"/>
                            <f:selectItem itemValue="suggestion 3"/>
                            <f:selectItem itemValue="suggestion 4"/>
                            <f:selectItem itemValue="suggestion 5"/>
                  </rich:comboBox>
                  <br/>
                  <h:panelGroup layout="block" styleClass="rich-combobox-font rich-combobox-shell" style="width:150px">
                       <h:inputText value="" id="text" autocomplete="off" styleClass="rich-combobox-font rich-combobox-input" style="width:130px"/>
                       <input type="text" styleClass="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive" readonly="true"/>
                       <input type="text" class="rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive " onclick="#{rich:component('suggestion')}.callSuggestion(true)"/>
                     <h:panelGroup layout="block" styleClass="rich-combobox-strut rich-combobox-font" style="width:140px">
                     </h:panelGroup>
                  </h:panelGroup>
                  <rich:suggestionbox var="sb" for="text" id="suggestion" suggestionAction="#{capitalsBean.autocomplete}">
                       <rich:column>
                            #{sb.name}
                       </rich:column>
                  </rich:suggestionbox>
            

             

            result attached.

            • 3. Re: Can you skin an <h:inputText> <button> to look like a comboBox?
              Tanya Ruttenberg Expert

              Thanks. I would never have figured that out myself....

               

              TDR