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,034 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: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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ejb on wildfly 5 20
How to position loader with CSS 3 41
Change of column alignment in div 2 18
Adding Row and Cell on a table 14 20
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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

803 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