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

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
    ACCEPTED ANSWER

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

    ‏2007-06-26T17:15:39Z  in response to SystemAdmin
    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
      ACCEPTED ANSWER

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

      ‏2007-06-26T17:53:18Z  in response to SystemAdmin

      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
        ACCEPTED ANSWER

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

        ‏2007-06-26T18:22:04Z  in response to SystemAdmin
        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
          ACCEPTED ANSWER

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

          ‏2007-06-26T21:26:49Z  in response to SystemAdmin

          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
            ACCEPTED ANSWER

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

            ‏2007-06-26T21:39:30Z  in response to SystemAdmin
            There is no CSS style property that will enable the horizontal scroll bar in a list box.
            • SystemAdmin
              SystemAdmin
              6420 Posts
              ACCEPTED ANSWER

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

              ‏2007-06-26T22:56:02Z  in response to SystemAdmin

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

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

    ‏2012-07-06T11:11:16Z  in response to SystemAdmin
    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
    ACCEPTED ANSWER

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

    ‏2012-07-06T11:22:23Z  in response to SystemAdmin
    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