Solved

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

Posted on 2011-09-21
4
1,005 Views
Last Modified: 2013-11-24
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);"
                                                      value="{maintainCouponUIController.requestView.couponDescription}">
                                                      <f:selectItems id="couponDescsId"
                                                            value="#{maintainCouponUIController.couponDescList}" />
                                                </h:selectOneMenu>
                                          </div>
                                    </td>

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){            
      selectEle.className='ON';
      if(selectEle.parentNode.style.width.replace(/px/i, '') < selectEle.offsetWidth){
            selectEle.parentNode.style.borderRight = '1px solid #6699cc';
      }else{
            selectEle.className='';
      }
}
function dynaSelectOFF(selectEle){
      if(selectEle.className =='ON'){
            selectEle.className='';
            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.
0
Comment
Question by:reddy2006
  • 2
  • 2
4 Comments
 
LVL 14

Expert Comment

by:ddsh79
ID: 36578596
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.
0
 

Author Comment

by:reddy2006
ID: 36584083
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
0
 
LVL 14

Accepted Solution

by:
ddsh79 earned 500 total points
ID: 36585139
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.
0
 

Author Closing Comment

by:reddy2006
ID: 36980398
I was expecting the solution from the code point of view but i did not get that.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now