How to populate long text in dropdownlist in asp.net

Question

Hi,

In asp.net, am trying to populate a dropdownlist box with very long text. I have fixed the width of list on the page and i don't want to change its size as it would affect my page layout. On clicking the dropdownlist, the text gets truncated to the size of the dropdown. I want to see the entire text without any truncation, without changing the size of the dropdownlist box..Also if there are any third party controls which would solve this problem?Would be very helpful if there's a solution for this.

Thanks in advance, Geetha

Answer 1

You might be able to use jQuery to create a tooltip like thing that appears when you hover over each option.

something like

// this executes on page load - just like asp.net Page_load()
function pageLoad(){
// attach a mouseover event to each option in your dropdown
$("#myDropdown option").mouseover(function(){
      // get the text from that option
      var text = $("#"+this.id).text();
      // display that text in a small tooltip
      showToolTip(text);

});

}

function showToolTip(text){
     // display in some way
}

there's a javascript library called wz_tooltip available at http://www.walterzorn.com

hope that helps

Answer 2

The problem that you're describing is restricted to IE (it might be fixed in the latest version, I haven't tested).

In the past, I've had success with binding javascript methods to the onClick event on the drop down to increase the width, and the onBlur event to set the width back to its original value.

Answer 3

Thanks a lot for the quick reply. I tried this script, but the tooltip appears behind the dropdown and is not visible too..And the tooltip did not pick the text in the right order..Any suggestions here?

Thanks in advance, Geetha

Answer 4

Right now am trying a dropdown box in Jquery that will wrap the text if it exceeds the size..but again the problem is it works fine on an independent solution but when i integrate it with my application, it does not read the .css file and it does not do any formatting(style, font, alignment) that it is supposed to do according to the .css file.Any idea why this is happening?

Thanks in advance, Geetha