long names to be displayed in dropdownlist as Items
-
Hi, I have a menu control in which i use a dropdownlist and i use the control in all the pages .The data is bound dynamically at runtime .But it so happens in some pages the item names in the dropdownlist occupy more space than the width of the ddl hence not visible completely .I cannot increase its size in the menu control.Is there a way to View the complete name on selecting the dropdownlist control . Pls help me out, Thanks in advance.
-
Hi, I have a menu control in which i use a dropdownlist and i use the control in all the pages .The data is bound dynamically at runtime .But it so happens in some pages the item names in the dropdownlist occupy more space than the width of the ddl hence not visible completely .I cannot increase its size in the menu control.Is there a way to View the complete name on selecting the dropdownlist control . Pls help me out, Thanks in advance.
I am not sure if this is the best solution but just try it. Use javascript to display the name on mouse over,steps are as follows 1.try to add a div tag in html file:
2.add this in code behind - ddl is name of your drop down list ddl.Attributes.Add("onmouseover", "showTooltip();"); ddl.Attributes.Add("onmouseout", "showTooltip();"); i.e on mouseover you can see the name on mouse out the name disappears 3.Add the following javascript function showTooltip = function () { var obj = document.getElementById("ddl"); if(event.type == "mouseout") { document.getElementById("tooltip").style.display = "none"; } else { document.getElementById("tooltip").innerHTML =obj.options[obj.selectedIndex].text; document.getElementById("tooltip").style.display = "inline"; document.getElementById("tooltip").style.backgroundColor="#ffffcc"; document.getElementById("tooltip").style.paddingTop="1px"; document.getElementById("tooltip").style.paddingBottom ="1px"; document.getElementById("tooltip").style.paddingLeft ="1px"; document.getElementById("tooltip").style.paddingRight ="1px"; document.getElementById("tooltip").style.borderColor="black"; document.getElementById("tooltip").style.color="black"; document.getElementById("tooltip").style.borderWidth="1px"; document.getElementById("tooltip").style.borderStyle="solid"; document.getElementById("tooltip").style.top = screen.height; document.getElementById("tooltip").style.left = screen.height ; } note: you have to change the top and left values by adding some constant number by trial and error method eg: document.getElementById("tooltip").style.top = screen.height+500; document.getElementById("tooltip").style.left = screen.height+20 ; also check how the page looks at different resolutions. -- modified at 6:39 Tuesday 20th June, 2006