ansaurus

Question

Select dropdown with fixed width cutting off content in IE

Answer 1

+2 A:

Here is a little script that should help you out:

http://www.icant.co.uk/forreview/tamingselect/

zac 2009-03-25 18:10:01

Thank you. I am wondering if anyone is aware of a javascript-free solution?

aaandre 2009-03-25 21:45:02

Answer 2

A:

Not javascript free i'm afraid, but I managed to make it quite small using jQuery

$('#del_select').mouseenter(function () {

 $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

 $(this).css("width","170px");

});

stukerr 2009-07-17 13:01:25

Answer 3

A:

Hi stukerr,

I like your idea, but it doesn't work fine, when the select makes bigger and I want to select one option, the control lost the focus and goes little again, so I can't select any option.

Do you know how can I solve this behaviour.

Thank you very much. Regards.

2009-08-07 07:51:32

I had the same problem... this worked better.http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie/912435#912435

davekaro 2010-02-26 15:17:31

Answer 4

A:

I found a pretty straightforward fix for this. In the html element add these properties:

onmouseover="autoWidth(this)" onblur="resetWidth(this)"

So whenever user clicks on that the width will automatically expand, and user moves out of the select box, the width will be reset to original.

TheOnlyOne 2010-05-14 05:50:53

Thank you for the reply.

aaandre 2010-05-19 23:41:34

Answer 5

A:

Not javascript free, I am afraid too and my solution do require a js library, however, you can only use those files which you need rather than using them all, maybe best suited for those who are already using YUI for their projects or deciding which one to use. Have a look at: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

My blog post also discusses other solutions as well, one is referenced back to here on stackoverflow, why I went back to create my own SELECT element is because of simple reason, I don't like mouseover expand events. Maybe if that helps anyone else too!

Hammad Tariq 2010-07-02 11:59:26

Answer 6

A:

A different approach: 1) instead of a select make it an edit box, disabled so noone can enter anything manually or change contents after selection 2) another hidden edit to contain an id of a selected option (explained below) 3) make a button [..] and script it to show that div below 4) make a hidden div with absolute position under or near the edit box 5) make that div to contain a select with style size="6" (to show 6 options and a scrollbar rather than a drop-down list) and a button "select" and maybe "cancel" 6) Do not style width so the whole thing will assume width of the widest option or the button plus maybe some padding of your choice 7) script the "select" button to copy id of the selected option to the hidden edit box and it's value to the visible one, also to hide the div again.

4 simple javascript commands total.

Kitet 2010-09-30 17:06:45

ansaurus

tags:

views:

answers:

Select dropdown with fixed width cutting off content in IE

related questions