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?

    daxxy

      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?
          daxxy

          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
                  <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?
              daxxy

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

               

              TDR

              • 4. Re: Can you skin an <h:inputText> <button> to look like a comboBox?
                ilya_shaikovsky
                created just with firebug help