Didnt get what you are looking for actually? Do you have any sample implementation lookup site?
If you want to set the width of combo box to constant, you can use the css, style="width: 200px;" and when on dropdown change the css style to style="width: auto;"
If you want to set the width to a fixed length, then you need to use the width attribute. By the way this works both in IE and Firefox. Tested on both.
mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;text-aligbn:center;font-family:Verdana;font-size:12px;";
var t = el.contentHTML;
t = t.replace(/<select/gi,'<ul');
t = t.replace(/<option/gi,'<li');
t = t.replace(/<\/option/gi,'</li');
t = t.replace(/<\/select/gi,'</ul');
mb.innerHTML = t;
var mx = (ie5)?-3:0;
var my = el.offsetHeight -2;
var docH = document.documentElement.offsetHeight ;
var bottomH = docH - el.getBoundingClientRect().bottom ;
mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) );
Yep it is not working in IE6.
But Last mentioned solution is looked very odd as it could be very difficult to generalize it Any body have a simple solution to work in IE6,IE7 and Firefox
There is one more solution but still with some odd behavior
Hi kamii47, i just wan't to know where is the line of code that you specify the max size of the dropdown to expand when user click it. And can i make it expand wider.
kamii47
Star
9500 Points
2383 Posts
Dropdownlist constant width,change according to the content length on dropdown
Nov 05, 2006 12:58 PM|LINK
I want's my Dropdownlist width to be constant when not selected.
when I want's to see the item it should be show the full contents.
I know this is down by some third party control.But can any body please give me the solution so that I can do it my self.
I know I have to play with span and div
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
e_screw
All-Star
19530 Points
3894 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Nov 05, 2006 06:08 PM|LINK
Didnt get what you are looking for actually? Do you have any sample implementation lookup site?
If you want to set the width of combo box to constant, you can use the css, style="width: 200px;" and when on dropdown change the css style to style="width: auto;"
Thanks
Electronic Screw
Website||Blog||Dub@i.net
kamii47
Star
9500 Points
2383 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Nov 06, 2006 04:09 AM|LINK
But with this solution dropsdown width also increases.Which I don't want's.[let say I have a td of 200 px on change it could also effect the td].
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
kamii47
Star
9500 Points
2383 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Nov 06, 2006 08:03 AM|LINK
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
e_screw
All-Star
19530 Points
3894 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Nov 06, 2006 11:29 AM|LINK
If you want to set the width to a fixed length, then you need to use the width attribute. By the way this works both in IE and Firefox. Tested on both.
Thanks
Electronic Screw
Website||Blog||Dub@i.net
kamii47
Star
9500 Points
2383 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Jan 23, 2008 12:55 PM|LINK
Can you please post the code.It is working in Firefox but not in IE6 & IE7
this.DropDownList1.Attributes.Add("onfocus", "'style=width;auto;'");
this.DropDownList1.Attributes.Add("onblur", "'style=width;100;'");
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
kamii47
Star
9500 Points
2383 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Jan 28, 2008 07:53 AM|LINK
Below is the near solution which will run both in IE and FF.
Ofcourse there will be some work have to be done of asp.net related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script> var spacer = null; var curObj = null; function openIt(obj) { if(spacer) return; spacer = document.createElement("span"); spacer.style.width = obj.offsetWidth; spacer.style.height = obj.offsetHeight; spacer.style.display = "none"; obj.parentNode.insertBefore(spacer, obj); obj.style.left = getAbsPos(obj, "Left"); obj.style.top = getAbsPos(obj, "Top"); obj.style.position = "absolute"; obj.style.width = obj.scrollWidth; obj.focus(); spacer.style.display = "inline"; curObj = obj; } function closeIt() { if(spacer) { spacer.parentNode.removeChild(spacer); spacer = null; } if(curObj) { curObj.style.width = "100px"; curObj.style.position = "static"; } } function getAbsPos(o,p){var i=0;while(o!=null){i+=o["offset"+p];o=o.offsetParent;}return i;} </script> </head> <body> <table> <tr> <td bgcolor="#336600" style="width: 100px"> <select style="width:100px" onmouseenter="openIt(this)" onchange="closeIt()" onblur="closeIt()"> <option>please select <option>My problem is that the column is not wide enough to display the contents in the drop-down list. <option>Something else </select> </td> <td bgcolor="#00ff33" style="width: 100px"> kfsdkjfhsdkfhdskjfhs</td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> </td> <td style="width: 100px"> </td> <td style="width: 100px"> </td> </tr> <tr> <td style="width: 100px"> </td> <td style="width: 100px"> </td> <td style="width: 100px"> </td> </tr> </table> </body> </html>If somebody have any better solution then let me know
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
sameer_khanj...
Contributor
7066 Points
1381 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Jan 28, 2008 10:38 AM|LINK
This code is not working in IE6 this is best for FF but in IE7 not looking good when dropdown size is increase and decrease
i also having 1 solution but that is working in IE6 but not in IE7
I also having same problem
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
<!--
function dropdown_menu_hack(el)
{
if(el.runtimeStyle.behavior.toLowerCase()=="none"){return;}
el.runtimeStyle.behavior="none";
var ie5 = (document.namespaces==null);
el.ondblclick = function(e)
{
window.event.returnValue=false;
return false;
}
if(window.createPopup==null)
{
var fid = "dropdown_menu_hack_" + Date.parse(new Date());
window.createPopup = function()
{
if(window.createPopup.frameWindow==null)
{
el.insertAdjacentHTML("AfterEnd","<iframe id='"+fid+"' name='"+fid+"' src='about:blank' frameborder='1' scrolling='no'></></iframe>");
var f = document.frames[fid];
f.document.open();
f.document.write("<html><body></body></html>");
f.document.close();
f.fid = fid;
var fwin = document.getElementById(fid);
fwin.style.cssText="position:absolute;top:0;left:0;display:none;z-index:99999;";
f.show = function(px,py,pw,ph,baseElement)
{
py = py + baseElement.getBoundingClientRect().top + Math.max( document.body.scrollTop, document.documentElement.scrollTop) ;
px = px + baseElement.getBoundingClientRect().left + Math.max( document.body.scrollLeft, document.documentElement.scrollLeft) ;
fwin.style.width = pw + "px";
fwin.style.height = ph + "px";
fwin.style.posLeft =px ;
fwin.style.posTop = py ;
fwin.style.display="block";
}
f_hide = function(e)
{
if(window.event && window.event.srcElement && window.event.srcElement.tagName && window.event.srcElement.tagName.toLowerCase()=="select"){return true;}
fwin.style.display="none";
}
f.hide = f_hide;
document.attachEvent("onclick",f_hide);
document.attachEvent("onkeydown",f_hide);
}
return f;
}
}
function showMenu()
{
function selectMenu(obj)
{
var o = document.createElement("option");
o.value = obj.value;
o.innerHTML = obj.innerHTML;
while(el.options.length>0){el.options[0].removeNode(true);}
el.appendChild(o);
el.title = o.innerHTML;
el.contentIndex = obj.selectedIndex ;
el.menu.hide();
}
el.menu.show(0 , el.offsetHeight , 10, 10, el);
var mb = el.menu.document.body;
mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;text-aligbn:center;font-family:Verdana;font-size:12px;";
var t = el.contentHTML;
t = t.replace(/<select/gi,'<ul');
t = t.replace(/<option/gi,'<li');
t = t.replace(/<\/option/gi,'</li');
t = t.replace(/<\/select/gi,'</ul');
mb.innerHTML = t;
el.select = mb.all.tags("ul")[0];
el.select.style.cssText="list-style:none;margin:0;padding:0;";
mb.options = el.select.getElementsByTagName("li");
for(var i=0;i<mb.options.length;i++)
{
mb.options[i].selectedIndex = i;
mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width/**/:100%;cursor:hand;cursor:pointer;white-space:nowrap;"
mb.options[i].title =mb.options[i].innerHTML;
mb.options[i].innerHTML ="<nobr>" + mb.options[i].innerHTML + "</nobr>";
mb.options[i].onmouseover = function()
{
if( mb.options.selected ){mb.options.selected.style.background="white";mb.options.selected.style.color="black";}
mb.options.selected = this;
this.style.background="#333366";this.style.color="white";
}
mb.options[i].onmouseout = function(){this.style.background="white";this.style.color="black";}
mb.options[i].onmousedown = function(){selectMenu(this); }
mb.options[i].onkeydown = function(){selectMenu(this); }
if(i == el.contentIndex)
{
mb.options[i].style.background="#333366";
mb.options[i].style.color="white";
mb.options.selected = mb.options[i];
}
}
var mw = Math.max( ( el.select.offsetWidth + 22 ), el.offsetWidth + 22 );
mw = Math.max( mw, ( mb.scrollWidth+22) );
var mh = mb.options.length * 15 + 8 ;
var mx = (ie5)?-3:0;
var my = el.offsetHeight -2;
var docH = document.documentElement.offsetHeight ;
var bottomH = docH - el.getBoundingClientRect().bottom ;
mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) );
if(( bottomH < mh) )
{
mh = Math.max( (bottomH - 12),10);
if( mh <100 )
{
my = -100 ;
}
mh = Math.max(mh,100);
}
self.focus();
el.menu.show( mx , my , mw, mh , el);
sync=null;
if(mb.options.selected)
{
mb.scrollTop = mb.options.selected.offsetTop;
}
window.onresize = function(){el.menu.hide()};
}
function switchMenu()
{
if(event.keyCode)
{
if(event.keyCode==40){ el.contentIndex++ ;}
else if(event.keyCode==38){ el.contentIndex--; }
}
else if(event.wheelDelta )
{
if (event.wheelDelta >= 120)
el.contentIndex++ ;
else if (event.wheelDelta <= -120)
el.contentIndex-- ;
}else{return true;}
if( el.contentIndex > (el.contentOptions.length-1) ){ el.contentIndex =0;}
else if (el.contentIndex<0){el.contentIndex = el.contentOptions.length-1 ;}
var o = document.createElement("option");
o.value = el.contentOptions[el.contentIndex].value;
o.innerHTML = el.contentOptions[el.contentIndex].text;
while(el.options.length>0){el.options[0].removeNode(true);}
el.appendChild(o);
el.title = o.innerHTML;
}
if(dropdown_menu_hack.menu ==null)
{
dropdown_menu_hack.menu = window.createPopup();
document.attachEvent("onkeydown",dropdown_menu_hack.menu.hide);
}
el.menu = dropdown_menu_hack.menu ;
el.contentOptions = new Array();
el.contentIndex = el.selectedIndex;
el.contentHTML = el.outerHTML;
for(var i=0;i<el.options.length;i++)
{
el.contentOptions [el.contentOptions.length] =
{
"value": el.options[i].value,
"text": el.options[i].innerHTML
}
if(!el.options[i].selected){el.options[i].removeNode(true);i--;};
}
el.onkeydown = switchMenu;
el.onclick = showMenu;
el.onmousewheel= switchMenu;
}
-->
</script>
<style>
body{margin:0px; padding:0px;}
.selectbox
{
font-family:Verdana;font-size:12px;
behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0);
}
</style>
</head>
<body>
<table width="889" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td align="center">
</tr>
<tr>
<td>
<select class="selectbox" style="width:100px;">
<option>1222222222222 df df df sdf sdf sdf sdf sdf sfsd f sd2</option>
<option>12121212121</option>
<option>212334343434</option>
<option>122222222222</option>
</select>
</tr>
</table>
</body>
</html>
if some one having a good solution then please Provide Us
sameer.khanjit@gmail.com
View Blog
Click "Mark as Answer" on the post that helped you.
kamii47
Star
9500 Points
2383 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Jan 28, 2008 12:19 PM|LINK
Yep it is not working in IE6.
But Last mentioned solution is looked very odd as it could be very difficult to generalize it
Any body have a simple solution to work in IE6,IE7 and Firefox
There is one more solution but still with some odd behavior
<html> <head> <title>New Page 1</title> </head> <body> <script type="text/javascript"> function ChangeListBoxWidth(obj) { obj.style.width = ''; } function ResetListBoxWidth(obj,width) { obj.style.width = width; } </script> <form method="post" action=""> <p> <select size="1" name="D1" style="width: 50" onclick="javascript:ChangeListBoxWidth(this);" onblur="javascript:ResetListBoxWidth(this,50)"> <option>a</option> <option>bxcvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</option> <option>c</option> </select></p> </form> </body> </html>So any Good suggestion ?
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])
svanistelroo...
Member
6 Points
18 Posts
Re: Dropdownlist constant width,change according to the content length on dropdown
Mar 07, 2008 02:25 AM|LINK
Hi kamii47, i just wan't to know where is the line of code that you specify the max size of the dropdown to expand when user click it. And can i make it expand wider.
Nice solution by the way
p.s : I'm a newbie[:)]