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

length of drop-down in combobox

daxxy Jul 23, 2009 5:03 PM

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

nbelaevski Jul 23, 2009 6:06 PM (in response to daxxy)

Use "listHeight" attribute. Read documentation for more.
Actions
2. Re: length of drop-down in combobox

daxxy Jul 24, 2009 9:06 AM (in response to daxxy)

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
Actions
3. Re: length of drop-down in combobox

nbelaevski Jul 24, 2009 10:19 AM (in response to daxxy)

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

4. Re: length of drop-down in combobox

daxxy Jul 24, 2009 10:26 AM (in response to daxxy)

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>

Go to original post