How to fix html drop down width problem in IE

How to fix html drop down width problem on Internet Explorer

2011-07-22T14:13:00.000-07:00

How to fix html drop down width problem in IE: html select box, dropdown problem in IE: "I was on google round the clock for complete 2 days trying to get HTML SELECT(DROPDOWN/LIST BOX) work the way my client wanted across all ..."

html select box, dropdown problem in IE

2011-07-22T01:24:00.000-07:00

Often in a select box, not all the options are of same width, and for showing all the options clearly you have to set the width of the select box to the max option width. But when the option values are too large, this doesn't look good on webpage. The problem is if the dropdown width is less than the max width of the options, user can't see the option completely.

Chrome and Firefox work smartly but as always, its IE which continues to keep you bugging. Honestly speaking, I couldn't find a simple and exact solution which would help me (may be I was not as good as you while googling :-)).

So here is how I fixed (download sample code):

Step 1: Created a textbox, make it disabled and set the value to --Select or anything which you want as default.
Step 2: Created a dropdown like arrow image and placed it at the extreme right of the text box.
Step 3: Created a HTML SELECT box with values (as large as you may want), make it hidden by default (style="display:none")

this was all HTML, now some JavaScript (if you prefer, use JQuery instead)

Step 4: Create 3 Java Script functions for-
- toggling the show/hide of select box => toggleSelectBox()
- setting the value of select option from dropdown in the textbox => pickOptionValue()
- initialize the hide/show events => init()
(Checkout the zipped code for details)
Step 5: Invoked init() on body load (<body onLoad="init()")
Step 6: Added onClick() events to textbox and image to toggle the selectbox (<input type="text" onClick="toggleSelectBox()">).
Step 7: Added onClick() event for selectbox(<select onClick="pickOptionValue(this)">).

I also did some styling to wrap all this into a div for more control, you can check the zipped code for more details.

Hope you would same sometime with my solution. If you have any comment, please drop your comments here...

Download Sample Code

2011-07-22T00:44:00.001-07:00

I was on google round the clock for complete 2 days trying to get HTML SELECT(DROPDOWN/LIST BOX) work the way my client wanted across all the browsers, specially the crazy IE (google chrome has just made things so simple :-)) This was my one of the initial website, when I started working.

Enuf about my thing now, lets see the problem u came looking for-
Often in a select box, not all the options are of same width, and for showing all the options clearly you have to set the width of the select box to the max option width. But when the option values are too large, this doesn't look good on webpage. The problem is if the width the less than the max width of the options, user can't see the option completely.

Chrome and Firefox work smartly but as always, its IE which continues to keep you bugging. Framkly speaking I couldn't find a properly solution which would help me (may be I was not as good as you while googling :-)).

So here is how I fixed:

Step 1: Created a textbox, make it disabled and set the value to --Select or anything which you want as default.

Step 2: Created a dropdown like arrow image and placed it at the extreme right of the text box.

Step 3: Created a HTML SELECT box with values (as large as you may want), make it hidden by default (style="display:none")

this was all HTML, now some JavaScript (if you prefer, use JQuery instead)

Step 4: Create 3 Java Script functions for-
- toggling the show/hide of select box => toggleSelectBox()
- setting the value of select option from dropdown in the textbox => pickOptionValue()
- initialize the hide/show events => init()
(Checkout the zipped code for details)

Step 5: Invoked init() on body load (<body onLoad="init()")
Step 6: Added onClick() events to textbox and image to toggle the selectbox (<input type="text" onClick="toggleSelectBox()">).
Step 7: Added onClick() event for selectbox(<select onClick="pickOptionValue(this)">).

I also did some styling to wrap all this into a div for more control, you can check the zipped code for more details.

Hope you would same sometime with my solution. If you have any comment, please drop your comments here...