Increase width and show items in a dropdown list when user clicks

S

sreedhardasi

Hi,

I have a dropdown list that has limited width (200px). This dropdown
contains items greater than this length and they are getting cut off.
I want to implement a solution to set the width to "auto" and show the
items when user clicks on it. But, it is not working in IE. It is
increasing the width, but not showing the items. I tried to use
cancelBubble property, but no luck.

Can anyone help me on how to both increase the width and show the
items on single click? Any help will be appreciated.

Thanks,
Sreedhar
 
P

pr

I have a dropdown list that has limited width (200px). This dropdown
contains items greater than this length and they are getting cut off.
I want to implement a solution to set the width to "auto" and show the
items when user clicks on it. But, it is not working in IE. It is
increasing the width, but not showing the items. I tried to use
cancelBubble property, but no luck.

Can anyone help me on how to both increase the width and show the
items on single click? Any help will be appreciated.

I think you mean something like this:

<html><head><title>inflatable select</title>
<style type="text/css">
.active { overflow: auto; }
.inactive { overflow: hidden; }
</style>
</head>
<body>
<select name="sel"
onfocus="this.className = 'active'; this.style.width = 'auto'"
onblur="this.className = 'inactive'; this.style.width = '5em'">
<option>first</option>
<option>really big, long option requiring disproportionate
amounts of space</option>
<option>third</option>
</select>
<script type="text/javascript">
document.getElementsByName("sel")[0].style.width = '5em';
</script>
</body>
</html>

I found both the className and style.width were required to make this
look right in the browsers (IE 6, Firefox 2, Opera 9.5b, Safari 3.1) I
tried.

A couple of notes:

- use em rather than px so users are allowed to adjust their font size
- use onfocus/blur so they are not required to have/use a mouse.

Hope that helps.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top