Topic
  • 8 replies
  • Latest Post - ‏2012-07-06T11:22:23Z by venkatesh@venky
SystemAdmin
SystemAdmin
6420 Posts

Pinned topic How to control the layout of h:selectOneListbox when the drop down data is too long

‏2007-06-26T15:22:03Z |

Hi,

Kind of the layout of the Listbox depends on how long the drop down data is. If the drop down data is too long, the Listbox is going to destroy the whole page layout design. e.g.

<h:selectOneListbox id="listbox3" styleClass="selectOneListbox" size="1" style="font-size: 9pt">

<f:selectItem itemValue="1" itemLabel="1" />
<f:selectItem itemValue="2" itemLabel="TESTFSLDFDLSFJSDLFJSDLFDSFLSDLFSDJFLDSFJDSFDFJDSFLJDSFLDJFSDLFJSDLFSDFJSLFDSFLJSDLFSDLFSDFJSDFJSDFJSDFJSDFJSDFJSDFJSDFJLSDFSDFJSDLFSDFSFJSDFLJGSGJSDFFSFSDFJSLFFSDLFJSD" />

</h:selectOneListbox>

Any idea?

Thanks very much in advance!
Updated on 2012-07-06T11:22:23Z at 2012-07-06T11:22:23Z by venkatesh@venky
  • SystemAdmin
    SystemAdmin
    6420 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2007-06-26T17:15:39Z  
    You can either set the size attribute (e.g., size="10") which sets the height of the listbox using "rows" (lines) as the unit of measure (e.g., it will be 10 lines tall) or you can specify an explicit height of listbox using the same specification you use on any tag by setting the style of tag and specifying a height property, e.g., style="height:400px".
  • SystemAdmin
    SystemAdmin
    6420 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2007-06-26T17:53:18Z  
    You can either set the size attribute (e.g., size="10") which sets the height of the listbox using "rows" (lines) as the unit of measure (e.g., it will be 10 lines tall) or you can specify an explicit height of listbox using the same specification you use on any tag by setting the style of tag and specifying a height property, e.g., style="height:400px".

    Sorry I did not say clearly. What I mean is that data affects the horizontal layout. Vertical layout is OK.

    Thanks bandreas
  • SystemAdmin
    SystemAdmin
    6420 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2007-06-26T18:22:04Z  

    Sorry I did not say clearly. What I mean is that data affects the horizontal layout. Vertical layout is OK.

    Thanks bandreas
    As with any component that supports the "style" attribute, you can control the height and width of a component by specifying a height and/or width property in the style. For example, style="width:100px;".
  • SystemAdmin
    SystemAdmin
    6420 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2007-06-26T21:26:49Z  
    As with any component that supports the "style" attribute, you can control the height and width of a component by specifying a height and/or width property in the style. For example, style="width:100px;".

    Thanks so much bandreas. Then could you please tell me how I can enable the horizontal scroll bar.

    Thanks very much again
  • SystemAdmin
    SystemAdmin
    6420 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2007-06-26T21:39:30Z  

    Thanks so much bandreas. Then could you please tell me how I can enable the horizontal scroll bar.

    Thanks very much again
    There is no CSS style property that will enable the horizontal scroll bar in a list box.
  • SystemAdmin
    SystemAdmin
    6420 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2007-06-26T22:56:02Z  
    There is no CSS style property that will enable the horizontal scroll bar in a list box.

    Oh, Thanks.
  • venkatesh@venky
    venkatesh@venky
    3 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2012-07-06T11:11:16Z  
    Hope it will helpful.

    Keep selectManyListbox (or) h:selectOneListbox inside Span tag with the style as overflow.

    Ex 1 :


    <h:selectManyListbox id="categ" value="#{testMB.catSelectedList}">
    <f:selectItems value="#{testMB.catList}" />
    </h:selectManyListbox>


    Ex 2 :


    <h:selectOneListbox id="categ" value="#{testMB.catSelected}">
    <f:selectItems value="#{testMB.catList}" />
    </h:selectOneListbox>

    -Venky
  • venkatesh@venky
    venkatesh@venky
    3 Posts

    Re: How to control the layout of h:selectOneListbox when the drop down data is too long

    ‏2012-07-06T11:22:23Z  
    Hope it will helpful.

    Keep selectManyListbox (or) h:selectOneListbox inside Span tag with the style as overflow.
    Dont forget to remove '@' in <@span and </@span>

    Ex 1 :

    <@span style = "width:146px;height:100px;overflow:scroll;">
    <h:selectManyListbox id="categ" value="#{testMB.catSelectedList}">
    <f:selectItems value="#{testMB.catList}" />
    </h:selectManyListbox>
    </@span>

    Ex 2 :

    <@span style = "width:146px;height:100px;overflow:scroll;">
    <h:selectOneListbox id="categ" value="#{testMB.catSelected}">
    <f:selectItems value="#{testMB.catList}" />
    </h:selectOneListbox>
    </@span>

    -Venky