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

Pinned topic How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

‏2007-10-10T20:10:02Z |
How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds certain width.
I tried doing this but this did't help me.

Could anybody suggest me please.
Thanks,

<h:panelGroup id="list1" rendered="false" style="overflow:scroll;width:435px;height:300px;font-size:11px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;color:#006699;">
<h:selectManyListbox value="#{pc_Catallowable.selectCats}" size="20" id="listbox1" style="font-size:11px;" styleClass="selectManyListbox" >
<f:selectItems value="#{pc_Catallowable.categories}"/>
</h:selectManyListbox>
</h:panelGroup>
Updated on 2012-07-06T11:20:57Z at 2012-07-06T11:20:57Z by venkatesh@venky
  • yurykats
    yurykats
    2186 Posts
    ACCEPTED ANSWER

    Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceed

    ‏2007-10-10T20:20:10Z  in response to SystemAdmin
    http://www.ibm.com/developerworks/forums/dw_thread.jsp?forum=378&thread=166895
  • SystemAdmin
    SystemAdmin
    6420 Posts
    ACCEPTED ANSWER

    Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

    ‏2007-10-11T19:06:01Z  in response to SystemAdmin
    How do i customize the multi select list box, to get the tooptip for selected item list.

    In this case i am overcome the scollbars.
    • SystemAdmin
      SystemAdmin
      6420 Posts
      ACCEPTED ANSWER

      Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

      ‏2007-10-11T20:12:41Z  in response to SystemAdmin
      The HTML option tag does let you specify a title attribute which is supposed to be used as the tooltip when you mouse over that option in the list box. JSF doesn't support this attribute on the f:selectItem tag because the title attribute specified on an option only works reliably in Firefox. (It works sporadically in some, but not all, versions of IE).

      If you want to set the title on each option, you can add a little JS to the page which copies the text of each option over to the title for the option.
      For example, the following script, inserted in the page AFTER the listbox is defined, will set it up (where "form1:listbox1" needs to be modified to be the correct id of the lsitbox).

      <script type="text/javascript">
      var i, opt, obj = document.getElementById("form1:listbox1");
      if (obj && obj.options) {
      for (i = 0; i < obj.options.length; i++) {
      opt = obj.options[i];
      opt.title = opt.text;
      }
      }
      </script>

      But as I noted, this will only work reliably in Firefox.
      • SystemAdmin
        SystemAdmin
        6420 Posts
        ACCEPTED ANSWER

        Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

        ‏2007-10-16T14:41:39Z  in response to SystemAdmin
        <script type="text/javascript">
        var i, opt, obj = document.getElementById("form1:listbox1";
        if (obj && obj.options) {
        for (i = 0; i < obj.options.length; i++) {
        opt = obj.options;
        opt.title = opt.text;
        }
        }
        </script>

        I am trying to run the above code.
        opt.text is getting undefined.
        • SystemAdmin
          SystemAdmin
          6420 Posts
          ACCEPTED ANSWER

          Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

          ‏2007-10-16T15:22:56Z  in response to SystemAdmin
          The forum encoder removed the array reference from what I posted, the script should read:
          <script type="text/javascript">
          var i, opt, obj = document.getElementById("form1:listbox1");
          if (obj && obj.options) {
          for (i = 0; i < obj.options.length; i++) {
          opt = obj.options BRACKETiBRACKET;
          opt.title = opt.text;
          }
          }
          </script>

          Where "BRACKET" is the usual JavaScript array reference bracket.
          • SystemAdmin
            SystemAdmin
            6420 Posts
            ACCEPTED ANSWER

            Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

            ‏2007-10-16T15:42:27Z  in response to SystemAdmin
            thanks, but it is only working in Firefox.

            what do you think, is there a way to fix this issue.
            1) get the scroll bars(vertical and horizontal).
            2) if 1 is not possible, then atleast get the tooltip in IE.
            3) if 1 and 2 options are not possible.
            what is other option we can look into it, to make it work in IE.

            • SystemAdmin
              SystemAdmin
              6420 Posts
              ACCEPTED ANSWER

              Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

              ‏2007-10-16T17:25:29Z  in response to SystemAdmin
              As I said before, it only works in Firefox.

              There is no way to display a horizontal scroll bar in a listbox in either Firefox or IE.

              There is no way to display the tooltip in IE.

              The control (listbox in a browser) simply isn't designed to handle wide (long) choices. So instead of trying to make it do something it isn't designed to do, you should be considering what kind of control is designed to do this. I'd use a multi-select data table. In most cases, I'd embed it in a dialog box that you pop-up to make the choice.
  • venkatesh@venky
    venkatesh@venky
    3 Posts
    ACCEPTED ANSWER

    Re: How to get horizontal and vertical scoll bars for mulitple select list box, when the data exceeds.

    ‏2012-07-06T11:20:57Z  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