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,078 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 14

Expert Comment

by:Dushyant Sharma
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:
Dushyant Sharma 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

740 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