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

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

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

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

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

    ‏2007-10-11T19:06:01Z  
    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

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

    ‏2007-10-11T20:12:41Z  
    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.
    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

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

    ‏2007-10-16T14:41:39Z  
    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.
    <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

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

    ‏2007-10-16T15:22:56Z  
    <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.
    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

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

    ‏2007-10-16T15:42:27Z  
    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.
    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

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

    ‏2007-10-16T17:25:29Z  
    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.

    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

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

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