Link to home
Start Free TrialLog in
Avatar of niico
niico

asked on

asp.net, small dropdownlist when expanded need to be wider - css?

I have a dropdownlist, which due to design is only 150px wide - though contains some text that is very wide. Is there any way (say using css?) to make the width of the dropdown very wide when clicked so as to show all the text?

mozilla seems to almost do this by default (though the scroller cuts some text off). IE seems to rigidly stick to the width of the dropdownlist.

any ideas greatly appreciated
Avatar of ulucefeozturk
ulucefeozturk

Hi,

this solution assumes dropdown has the width and font style attributes.

then it goes like that.

you can create a new html file and copy/paste the code below and test it.

<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function doIt(){
var elem;
var opCount;
var i;
var opTextLenth;
var maxLength;
var elemFontSize;
maxLength = 0;
elem = event.srcElement;
opCount = elem.options.length;
elemFontSize = elem.style.fontSize.split('p')[0];
for(i=0;i<opCount;i++){
opTextLenth = (elem.options.item(i).innerHTML.length) * (elemFontSize/1.5);
if(opTextLenth > maxLength){
      maxLength = opTextLenth;
}
}
elem.style.width = maxLength + 'px';
}
</script>
</head>
<body>
<SELECT onclick="doIt();" id="cmbDummy" name="cmbDummy" style="WIDTH:150px;Font-Size:10px">
<OPTION selected value="1">qwerty qw q w q w w ew ew ew ew ew ew ew</OPTION>
<OPTION value="2">qwerty</OPTION>
</SELECT>
</body>
</html>

i wish it helps.
Avatar of niico

ASKER

thanks!

cant try that at the moment because im not on my development machine - though I think you've misunderstood what I need to do (sorry I dont think I explained it very well).

I never want the actual dropdownlist to get wider - not the bit that sits on the page. I just want the rectangle that drops down (the bit with the list of items in) to widen out to incorporate all the items.

Does that make sense?
ASKER CERTIFIED SOLUTION
Avatar of ulucefeozturk
ulucefeozturk

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of niico

ASKER

Thanks

Looks like its not possible then?!...