4 Replies Latest reply on Jul 24, 2009 10:26 AM by Tanya Ruttenberg

    length of drop-down in combobox

    Tanya Ruttenberg Expert

      Yet another maddening comboBox question. Here is the code:

      <rich:comboBox value="#{office.type}">
       <f:selectItem itemLabel="#{messages['ond.label.menu.default.select']}"
       itemValue="" />
       <f:selectItem itemLabel="ADO" itemValue="ADO" />
       <f:selectItem itemLabel="DDS" itemValue="DDS" />
       <f:selectItem itemLabel="DHU" itemValue="DHU" />
       <f:selectItem itemLabel="EXTAGY" itemValue="EXTAGY" />
       <f:selectItem itemLabel="OHA/ODAR" itemValue="OHA" />
       <f:selectItem itemLabel="OHAVTC" itemValue="VTC" />
       <f:selectItem itemLabel="OIG" itemValue="OIG" />
       <f:selectItem itemLabel="TSC" itemValue="TSC" />
       <f:selectItem itemLabel="ROCC" itemValue="ROCC" />
      </rich:comboBox>


      I know it's not a "select", but I like how it looks better than inputSelect.

      The drop down is maybe 50px high. I have tried altering adding a height attribute to every class involved in this component and nothing seems to affect the size of the drop-down menu. I just took another look at the documentation and for the life of me I can't see any way to do this.

      I'm getting ready to switch back to HTML. It may not be as pretty, but it is much more straightforward!

      TDR

        • 1. Re: length of drop-down in combobox
          Nick Belaevski Master

          Use "listHeight" attribute. Read documentation for more.

          • 2. Re: length of drop-down in combobox
            Tanya Ruttenberg Expert

            Believe me I don't post until I've tried many things and of course, listHeight is the first thing I tried. It seemed to have no effect. I tried listHeigh="400" and listHeigh="400px".

            TDR

            • 3. Re: length of drop-down in combobox
              Nick Belaevski Master

              Can you please post page code that's not working?

              • 4. Re: length of drop-down in combobox
                Tanya Ruttenberg Expert

                sure. I welcome your comments and suggestions.

                <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:s="http://jboss.com/products/seam/taglib"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:rich="http://richfaces.org/rich"
                 template="layout/template.xhtml">
                
                 <ui:define name="body">
                
                 <h:form id="officeViewSearch" styleClass="edit">
                 <div class="actionButtons"><h:commandButton id="search1"
                 value="Search" action="/ONDDevResultPage.xhtml" /> <s:button
                 id="reset1" value="Reset" includePageParams="false" /></div>
                 <rich:tabPanel switchType="client">
                 <rich:tab label="Basic Search">
                 <h:panelGrid columns="1">
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.sitecode']}</ui:define>
                 <h:inputText id="siteCode" value="#{office.siteCode}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.ring']}</ui:define>
                 <h:inputText id="ring" value="#{office.ring}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.devname']}</ui:define>
                 <h:inputText id="devName" value="#{devices.devName}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.type']}</ui:define>
                 <rich:comboBox value="#{office.type}" listHeight="150">
                 <f:selectItem
                 itemLabel="#{messages['ond.label.menu.default.select']}"
                 itemValue="" />
                 <f:selectItem itemLabel="ADO" itemValue="ADO" />
                 <f:selectItem itemLabel="DDS" itemValue="DDS" />
                 <f:selectItem itemLabel="DHU" itemValue="DHU" />
                 <f:selectItem itemLabel="EXTAGY" itemValue="EXTAGY" />
                 <f:selectItem itemLabel="OHA/ODAR" itemValue="OHA" />
                 <f:selectItem itemLabel="OHAVTC" itemValue="VTC" />
                 <f:selectItem itemLabel="OIG" itemValue="OIG" />
                 <f:selectItem itemLabel="TSC" itemValue="TSC" />
                 <f:selectItem itemLabel="ROCC" itemValue="ROCC" />
                 </rich:comboBox>
                 </s:decorate>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.state']}</ui:define>
                 <rich:inplaceSelect defaultLabel="Start typing or click"
                 value="#{office.state}">
                 <f:selectItem itemLabel="" itemValue="" />
                 <s:selectItems value="#{statesList.resultList}"
                 var="_state"
                 label="#{_state.abbreviation} (#{_state.fullName})"
                 itemValue="#{_state.abbreviation}" />
                 </rich:inplaceSelect>
                 </s:decorate>
                 </h:panelGrid>
                 </rich:tab>
                 <rich:tab label="Advanced Search">
                 <h:panelGrid columns="4">
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.addr1']}</ui:define>
                 <h:inputText id="addr1" value="#{office.addr1}" />
                 </s:decorate>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.city']}</ui:define>
                 <h:inputText id="city" value="#{office.city}" />
                 </s:decorate>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.zip']}</ui:define>
                 <h:inputText id="zip" value="#{office.zip}" />
                 </s:decorate>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.state']}</ui:define>
                 <rich:inplaceSelect
                 defaultLabel="Start typing or click the arrow"
                 value="#{office.state}">
                 <s:selectItems value="#{statesList.resultList}"
                 var="_state"
                 label="#{_state.abbreviation} (#{_state.fullName})"
                 itemValue="#{_state.abbreviation}" />
                 </rich:inplaceSelect>
                 </s:decorate>
                 </h:panelGrid>
                
                 <h:panelGrid columns="4">
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.contactname']}</ui:define>
                 <h:inputText id="contact" value="#{office.contactName}" />
                 </s:decorate>
                
                
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.rocc']}</ui:define>
                 <rich:comboBox
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}"
                 value="#{office.rocc}">
                 <f:selectItem itemValue="" />
                 <f:selectItem itemValue="BALT" />
                 <f:selectItem itemValue="BIRM" />
                 <f:selectItem itemValue="CHIC" />
                 <f:selectItem itemValue="JAMA" />
                 <f:selectItem itemValue="KANS" />
                 <f:selectItem itemValue="PHIL" />
                 <f:selectItem itemValue="RICH" />
                 </rich:comboBox>
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.swvendor']}</ui:define>
                 <rich:comboBox
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}"
                 value="#{office.swvendor}">
                 <f:selectItem itemLabel="" itemValue="" />
                 <f:selectItem itemLabel="ILEVY" itemValue="ILEVY" />
                 <f:selectItem itemLabel="MIDAS" itemValue="MIDAS" />
                 <f:selectItem itemLabel="VERSA" itemValue="VERSA" />
                 <f:selectItem itemLabel="INDEP" itemValue="INDEP" />
                 </rich:comboBox>
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.voip']}</ui:define>
                 <rich:comboBox
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}"
                 value="#{office.voip}">
                 <f:selectItem itemLabel="" itemValue="" />
                 <f:selectItem itemLabel="Yes" itemValue="Y" />
                 <f:selectItem itemLabel="No" itemValue="N" />
                 </rich:comboBox>
                 </s:decorate>
                
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.wanvendor']}</ui:define>
                 <rich:comboBox
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}"
                 value="#{office.wanvendor}">
                 <f:selectItem itemLabel="" itemValue="" />
                 <f:selectItem itemLabel="ATT" itemValue="ATT" />
                 <f:selectItem itemLabel="VZB" itemValue="VZB" />
                 </rich:comboBox>
                 </s:decorate>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.extranet']}?</ui:define>
                 <rich:comboBox
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}"
                 value="#{office.extranet}">
                 <f:selectItem itemLabel="" itemValue="" />
                 <f:selectItem itemLabel="Yes" itemValue="Y" />
                 <f:selectItem itemLabel="No" itemValue="N" />
                 </rich:comboBox>
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.circuitid']}</ui:define>
                 <h:inputText id="circuitId" value="#{office.circuitId}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.sitecode']}</ui:define>
                 <h:inputText id="siteCode" value="#{office.siteCode}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.ring']}</ui:define>
                 <h:inputText id="ring" value="#{office.ring}" />
                 </s:decorate>
                
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.type']}</ui:define>
                 <rich:comboBox value="#{office.type}" listHeight="200">
                 <f:selectItem
                 itemLabel="#{messages['ond.label.menu.default.select']}"
                 itemValue="" />
                 <f:selectItem itemLabel="ADO" itemValue="ADO" />
                 <f:selectItem itemLabel="DDS" itemValue="DDS" />
                 <f:selectItem itemLabel="DHU" itemValue="DHU" />
                 <f:selectItem itemLabel="EXTAGY" itemValue="EXTAGY" />
                 <f:selectItem itemLabel="OHA/ODAR" itemValue="OHA" />
                 <f:selectItem itemLabel="OHAVTC" itemValue="VTC" />
                 <f:selectItem itemLabel="OIG" itemValue="OIG" />
                 <f:selectItem itemLabel="TSC" itemValue="TSC" />
                 <f:selectItem itemLabel="ROCC" itemValue="ROCC" />
                 </rich:comboBox>
                 </s:decorate>
                 </h:panelGrid>
                 <rich:spacer height="20px" />
                 <h:panelGrid columns="2">
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.devname']}</ui:define>
                 <h:inputText id="devName" value="#{devices.devName}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.devip']}</ui:define>
                 <h:inputText value="#{devices.devIp}" />
                 </s:decorate>
                
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.devosver']}</ui:define>
                 <ui:remove>
                 <rich:inplaceSelect
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}"
                 value="#{devices.devOsVer}">
                 <s:selectItems value="#{osVerList.resultList}"
                 var="_os" label="#{_os}" itemValue="#{_os}" />
                 </rich:inplaceSelect>
                 </ui:remove>
                 <rich:comboBox suggestionValues="#{osVerList.resultList}"
                 value="#{devices.devOsVer}"
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}" />
                 </s:decorate>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.devplatform']}</ui:define>
                 <rich:comboBox
                 suggestionValues="#{platformList.resultList}"
                 value="#{devices.devPlatform}"
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}" />
                 </s:decorate>
                
                 <ui:remove>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label"> OR Enter value: </ui:define>
                 <h:inputText value="#{devices.devPlatform}" />
                 </s:decorate>
                 </ui:remove>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.devserialnum']}</ui:define>
                 <h:inputText value="#{devices.devSerialNum}" />
                 </s:decorate>
                
                 <ui:remove>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label"> OR Enter value: </ui:define>
                 <h:inputText value="#{devices.devSerialNum}" />
                 </s:decorate>
                 </ui:remove>
                
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label">#{messages['ond.label.perouter']}</ui:define>
                 <rich:comboBox
                 suggestionValues="#{peRouterList.resultList}"
                 value="#{devices.peRouter}"
                 defaultLabel="#{messages['ond.label.input.inplaceselect']}" />
                 </s:decorate>
                 <ui:remove>
                 <s:decorate template="layout/display.xhtml">
                 <ui:define name="label"> OR Enter value: </ui:define>
                 <h:inputText value="#{devices.peRouter}" />
                 </s:decorate>
                 </ui:remove>
                 </h:panelGrid>
                 </rich:tab>
                 </rich:tabPanel>
                
                 <div class="actionButtons"><h:commandButton id="search"
                 value="Search" action="/ONDDevResultPage.xhtml" /> <s:button
                 id="reset" value="Reset" includePageParams="false" /></div>
                
                 </h:form>
                
                
                 </ui:define>
                
                </ui:composition>