• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1317
  • Last Modified:

How to wrap the content in the drop down box and show the complete value when you mouse over on the value in JSF?

Topic related to Java, JSF, JavaScript, CSS
Actually i have a drop down in the page and that drop down is of fixed length for making the UI look good. But the list in the drop down is very big ( 256 characters). We are using IE 6 browser. As you know, in IE 6, if the size of the values in the drop down are larger than the size of the drop down box, it will not show the full value. Just we can see only upto the size of the dropdown. But we have written the code in such a way that it works as it works in chrome.( ex: if i click on the drop down, drop down list box will be shown up with the actual size of the values in the drop down). But the issue here for me is even if i display the list down, that values in the list are very big (like 256 characters ) and it is making that list box moving out of the screen. So i need to wrap the content in that list and when i mouse over on each value, it should show the whole content of that particular value using the tool tip kind of thing. Can you please explain me how to do this? I hope you understood my question . If you are not clear, i can explain you again"

We are using JSF framework in our project and using all the richfaces and a4j components.

Here is more information for you.

The code for drop down in my " XXX.xhtml " page

                                               <td width="auto">
                                          <div style="width:180px;" class="dyna-select">
                                                <h:selectOneMenu id="couponDescId" onmouseover="this.focus();"
                                                      onfocus="dynaSelectON(this);" onblur="dynaSelectOFF(this);"
                                                      <f:selectItems id="couponDescsId"
                                                            value="#{maintainCouponUIController.couponDescList}" />

This is the code which i have in my ccs file.

div.dyna-select {
      overflow: hidden;
      height: 22px;
      border: 0px solid transperent;
      display: inline;
      vertical-align: middle;
div.dyna-select select{
      position: absolute;
      height: 20px;
      width: expression(this.parentNode.style.width);

div.dyna-select select.ON{
      width: auto;

This is the code which i have in my java scrip file:

function dynaSelectON(selectEle){            
      if(selectEle.parentNode.style.width.replace(/px/i, '') < selectEle.offsetWidth){
            selectEle.parentNode.style.borderRight = '1px solid #6699cc';
function dynaSelectOFF(selectEle){
      if(selectEle.className =='ON'){
            selectEle.parentNode.style.borderRight = '0px solid #6699cc';

By using this code, i could able to get the drop down list box when i click on dropdown box with the full value.
But the problem for me is the values are very big in such a way that the list box is also coming out of the screen.
So how should i solve this problem This is how the drop down looks.This is how the drop down looks after i click on the dropdown box.
But the value is big and it is going out of the screen.
So how should i fix it?
Is there any better solution to fix this?
Really hoping to hear from you soon.
Thanks in advance.
  • 2
  • 2
1 Solution
Dushyant SharmaCommented:
I don't think you should be putting such large value in dropdown box. you may try to put them in two lines but that again will look like different values so it is advised that you should consider abbreviated version of the values you use in the box.
reddy2006Author Commented:
What you said is right....It is good to abbreviate the text in the dropdown.
But the client wants to see the full description at least when you mouse over on the abbreviated version
using some tool tip kind of thing.
or else i think we can put a horizontal scroll bar for the drop down list box.
With my knowledge, i tried to add such things but did not able to make it work.
So can you tell me how to do it. or any other good possible solution
Dushyant SharmaCommented:
Well i do not see any direct solution for this but i think you can achieve this using javascript driven dropdown menu which will create a virtual dropdown using divs having the values of original select box. You should look for jquery based dropdown menus.
reddy2006Author Commented:
I was expecting the solution from the code point of view but i did not get that.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now