Best IT Recipes

Select fixed-width drop-down, trimming content in IE

Problem:

Some elements in an element require more than the specified width of 145 pixels for full display.

Firefox behavior : clicking on the select button displays a list of items in the drop-down list, configured to the width of the longest item.

Behavior of IE6 and IE7 : clicking on select displays a list of items in the drop-down list, limited to a width of 145 pixels, which makes it impossible to read longer items.

The current user interface requires us to set this drop-down menu to 145px and have elements with longer descriptions.

Any recommendations for resolving a problem with IE?

The top element should remain equal to 145px even when expanding the list.

Thank!

css:

select.center_pull { background:#eeeeee none repeat scroll 0 0; border:1px solid #7E7E7E; color:#333333; font-size:12px; margin-bottom:4px; margin-right:4px; margin-top:4px; width:145px; }

The input code is selected here (no backend_dropbox style definition at this time)

 <select id="select_1" class="center_pull backend_dropbox" name="select_1"> <option value="-1" selected="selected">Browse options</option> <option value="-1">------------------------------------</option> <option value="224">Option 1</option> <option value="234">Longer title for option 2</option> <option value="242">Very long and extensively descriptive title for option 3</option> </select>

Full html page if you want to quickly test in a browser:

 <!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=utf-8" /> <title>dropdown test</title> <style type="text/css"> <!-- select.center_pull { background:#eeeeee none repeat scroll 0 0; border:1px solid #7E7E7E; color:#333333; font-size:12px; margin-bottom:4px; margin-right:4px; margin-top:4px; width:145px; } --> </style> </head> <body> <p>Select width test</p> <form id="form1" name="form1" method="post" action=""> <select id="select_1" class="center_pull backend_dropbox" name="select_1"> <option value="-1" selected="selected">Browse options</option> <option value="-1">------------------------------------</option> <option value="224">Option 1</option> <option value="234">Longer title for option 2</option> <option value="242">Very long and extensively descriptive title for option 3</option> </select> </form> </body> </html>
+55
html css internet-explorer html-select
Mar 25 '09 at 18:02
source share
23 answers

For IE 8, there is a simple css based solution:

 select:focus { width: auto; position: relative; }

(You need to set the position property if selectbox is a child of a fixed-width container.)

Unfortunately, IE 7 and less do not support the: focus selector.

+28
Dec 22 2018-10-22
source share

I did Google about this problem, but did not find a better solution, so I created a solution that works fine in all browsers.

just call the badFixSelectBoxDataWidthIE () function when the page loads.

 function badFixSelectBoxDataWidthIE(){ if ($.browser.msie){ $('select').each(function(){ if($(this).attr('multiple')== false){ $(this) .mousedown(function(){ if($(this).css("width") != "auto") { var width = $(this).width(); $(this).data("origWidth", $(this).css("width")) .css("width", "auto"); /* if the width is now less than before then undo */ if($(this).width() < width) { $(this).unbind('mousedown'); $(this).css("width", $(this).data("origWidth")); } } }) /* Handle blur if the user does not change the value */ .blur(function(){ $(this).css("width", $(this).data("origWidth")); }) /* Handle change of the user does change the value */ .change(function(){ $(this).css("width", $(this).data("origWidth")); }); } }); } }
+9
Dec 30 '10 at 11:28
source share

Here is a little script that should help you:

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

+7
Mar 25 '09 at 18:10
source share

For a simple Javascript-free solution, adding the title attribute to your <option> s containing the text may be enough, depending on your requirements.

 <option value="242" title="Very long and extensively descriptive text"> Very long and extensively descriptive text </option>

This will show the interrupt text in the form of a hint when <option> hangs, regardless of the width of the <select>.

Works for IE7 +.

+7
Feb 10 '11 at 12:28
source share

Without javascript, I'm scared, but I managed to make it pretty small using jQuery

 $('#del_select').mouseenter(function () { $(this).css("width","auto"); }); $('#del_select').mouseout(function () { $(this).css("width","170px"); });
+3
Jul 17 '09 at 13:01
source share

You can simply use this plugin for jquery;)

http://plugins.jquery.com/project/skinner

 $(function(){ $('.select1').skinner({'width':'200px'}); });
+3
Oct 06 2018-11-11T00:
source share

A small but, hopefully, useful code update from MainMa and user558204 (thanks to the guys), which removes every unnecessary loop, stores a copy of $ (this) in a variable in each event handler, since it was used more than once, they also blurred and changed events because they had the same effect.

Yes, it is still not perfect, as it resizes the select element, not just the drop-down options. But hey, it saved me the brine, I (very, unfortunately) still have to maintain the IE6-dominant user base in the business.

 // IE test from from: https://gist.github.com/527683 var ie = (function () { var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : undef; } ()); function badFixSelectBoxDataWidthIE() { if (ie < 9) { $('select').not('[multiple]') .mousedown(function() { var t = $(this); if (t.css("width") != "auto") { var width = t.width(); t.data("ow", t.css("width")).css("width", "auto"); // If the width is now less than before then undo if (t.width() < width) { t.unbind('mousedown'); t.css("width", t.data("ow")); } } }) //blur or change if the user does change the value .bind('blur change', function() { var t = $(this); t.css("width", t.data("ow")); }); } }
+2
May 01 '12 at 23:46
source share

I found a pretty simple solution for this. In the <select> html element, add the following properties:

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

Therefore, whenever a user clicks on that the width will automatically expand and the user leaves the selection field, the width will be reset to the original.

+1
May 14 '10 at 5:50
source share

Another approach:

  • instead of choosing to make this edit box disabled, so no one can enter anything manually or change the contents after selection
  • another hidden edit containing the identifier of the selected parameter (explained below)
  • make a [..] button and a script to show the div below
  • make a hidden div with an absolute position under or next to the edit field
  • make the div contain a choice with style size = "6" (to show 6 options and a scrollbar, not a drop-down list) and a "select" button and possibly "cancel"
  • Do not set the font width, so all this will take the width of the widest option or button plus, maybe some kind of addition of your choice.
  • The script button is “select” to copy the identifier of the selected option to the hidden edit field, and the value to visible, and also hide the div again.

Only 4 simple javascript commands.

+1
Sep 30 '10 at 17:06
source share

a similar solution can be found here using jquery to set the automatic width when focusing (or with the mouse) and set the orignal width back when blurring (or with the mouse) http://css-tricks.com/select-cuts-off-options-in- ie-fix / .

+1
Feb 21 2018-11-11T00:
source share
 for (i=1;i<=5;i++){ idname = "Usert" + i; document.getElementById(idname).style.width = "100%"; }

I used this method to show a dropdown when the width is not shown correctly.

It works for IE6, Firefox and Chrome.

+1
May 4 '11 at 1:54
source share

A full jQuery plugin is available, check out the demo page: http://powerkiki.github.com/ie_expand_select_width/

Disclaimer: I coded this thing, patches are welcome

+1
Aug 20 2018-12-12T00:
source share

Why does someone need to hover over an event in the drop-down list? Here you can use the IE8 control method for how the dropdown should work:

First, make sure that we only pass our function to IE8:

  var isIE8 = $.browser.version.substring(0, 2) === "8."; if (isIE8) { //fix me code }

Then, to allow the choice to expand beyond the content area, include our drop-down lists in a div with the correct structure, if not already, and then call the helper function:

  var isIE8 = $.browser.version.substring(0, 2) === "8."; if (isIE8) { $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute'); //helper function for fix ddlFix(); }

Now for the events. Since IE8 throws an event after focusing for some reason, IE will close the widget after rendering when trying to expand. The work around will be binding to the 'focusin' and 'focusout' class, which will automatically expand based on the longest option text. Then, to ensure a constant minimum width that does not decrease after the default value, we can get the current width of the selection list and set it to the min-width property of the drop-down list in the 'onchange' binding:

  function ddlFix() { var minWidth; $('select') .each(function () { minWidth = $(this).width(); $(this).css('min-width', minWidth); }) .bind('focusin', function () { $(this).addClass('expand'); }) .change(function () { $(this).css('width', minWidth); }) .bind('focusout', function () { $(this).removeClass('expand'); }); }

Finally, remember to add this class to the stylesheet:

  select:focus, select.expand { width: auto; }
+1
Sep 20 '12 at 20:00
source share

I'm not afraid that javascript is not afraid, and my solution requires the js library, however you can only use the files you need and not use all of them, it may be best suited for those who already use YUI for their projects or decide which one to use. Take a look at: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

My blog post also discusses other solutions that are referenced here on stackoverflow, why I came back to create my own SELECT element for the simple reason, I don't like mouse extension events. Maybe if this helps someone else too!

0
Jul 02 2018-10-02T00:
source share

Improved jQuery BalusC solution . Used also: Brad Robertson comment here .

Just put this in .js, use a wide class for your desired combos and don't fake it to give it an Id. Call the function in onload (or documentReady or something else).
Like a simple ass that :)
It will use the width that you defined for combos as the minimum length.

 function fixIeCombos() { if ($.browser.msie && $.browser.version < 9) { var style = $('<style>select.expand { width: auto; }</style>'); $('html > head').append(style); var defaultWidth = "200"; // get predefined combo widths. var widths = new Array(); $('select.wide').each(function() { var width = $(this).width(); if (!width) { width = defaultWidth; } widths[$(this).attr('id')] = width; }); $('select.wide') .bind('focus mouseover', function() { // We're going to do the expansion only if the resultant size is bigger // than the original size of the combo. // In order to find out the resultant size, we first clon the combo as // a hidden element, add to the dom, and then test the width. var originalWidth = widths[$(this).attr('id')]; var $selectClone = $(this).clone(); $selectClone.addClass('expand').hide(); $(this).after( $selectClone ); var expandedWidth = $selectClone.width() $selectClone.remove(); if (expandedWidth > originalWidth) { $(this).addClass('expand').removeClass('clicked'); } }) .bind('click', function() { $(this).toggleClass('clicked'); }) .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); } }) .bind('blur', function() { $(this).removeClass('expand clicked'); }) } }
0
Sep 05 '11 at 19:33
source share

It was tested in all versions of IE, Chrome, FF and Safari.

// JavaScript code

  <script type="text/javascript"> <!-- begin hiding function expandSELECT(sel) { sel.style.width = ''; } function contractSELECT(sel) { sel.style.width = '100px'; } // end hiding --> </script> // Html code <select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" > <option value="0" selected="selected" readonly="readonly">Select</option> <option value="1" >Apple</option> <option value="2" >Orange + Banana + Grapes</option>
0
May 8 '12 at 11:51
source share

I have one more contribution to this. I wrote this a while ago that you might find useful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

This is a jquery plugin for creating an unordered list supported by a hidden select element.

The source is on github: https://github.com/tncbbthositg/GiantDropdown

You will be able to handle behavior and styles in UL that you cannot with SELECT. Everything else should be the same, because the selection list still exists, it is just hidden, but UL will use it as a backup data storage (if you want).

0
Jun 26 '12 at 16:12
source share

Here is a solution that really works.

It sets the width in IE and does not spoil your page layout and does not close the drop-down list when you hover over selection options, such as some other solutions on this page.

However, you need to change the margin-right width values ​​and values ​​to fit your selection fields.

You can also replace $('select') with $('#Your_Select_ID_HERE') to process only a specific selection field. You will also need to call the fixIESelect() function on the onload body or through jQuery using the DOM ready , as it was in my code below:

 ////////////////////////// // FIX IE SELECT INPUT // ///////////////////////// window.fixIESelect_clickset = false; function fixIESelect() { if ($.browser.msie) { $('select').mouseenter(function () { $(this).css("width","auto"); $(this).css("margin-right","-100"); }); $('select').bind('click focus',function () { window.fixIESelect_clickset = true; }); $('select').mouseout(function () { if(window.fixIESelect_clickset != true) { $(this).css("width","93px"); window.fixIESelect_clickset = false; } }); $('select').bind('blur change',function () { $(this).css("width","93px"); }); } } ///////////// // ONLOAD // //////////// $(document).ready(function() { fixIESelect(); });
0
Jul 19 '12 at 19:30
source share

I wanted this to work with selections that I added dynamically to the page, so after a lot of experimentation, I ended up providing all the options I wanted to make using the "fixedwidth" class, and then added the following CSS:

 table#System_table select.fixedwidth { width: 10em; } table#System_table select.fixedwidth.clicked { width: auto; }

and this code

 <!--[if lt IE 9]> <script type="text/javascript"> jQuery(document).ready(function() { jQuery(document).on( { 'mouseenter': function(event) { jQuery(this).addClass('clicked'); }, 'focusout change blur': function() { jQuery(this).removeClass('clicked'); } }, 'select.fixedwidth'); }); </script> <![endif]-->

A few notes:

  • Despite the fact that my selections are in a table, I had to do "on" in jQuery(document).on instead of jQuery('table#System_table').on
  • Despite the fact that the jQuery documentation says " mouseleave " instead of " blur ", I found that in IE7, when I moved the mouse to the drop-down list, it will get mouseleave , but not blur .
0
Sep 08 '12 at 19:57
source share

For my layout, I did not want to hack (without increasing the width, without clicking with a car, and then going to the original). This broke my existing layout. I just wanted it to work fine, like other browsers.

I found this to be true: -

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html

0
Jan 10 '15 at 4:14
source share

A workaround if you do not care about the weird presentation after selecting the option (i.e., select go to a new page):

 <!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. --> <div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'> <select onchange='jump();'> <!-- '&#9660;(▼)' produces a fake dropdown indicator --> <option value=''>Jump to ... &#9660;</option> <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option> ... </select> </div>
0
Jun 26 '15 at 2:54
source share

Clean css solution: http://bavotasan.com/2011/style-select-box-using-only-css/

 .styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; } .styled-select { width: 240px; height: 34px; overflow: hidden; background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd; border: 1px solid #ccc; } 
 <div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div>
0
Aug 07 '15 at 8:05
source share

Best solution: css + javascript

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

 var el; $("select") .each(function() { el = $(this); el.data("origWidth", el.outerWidth()) // IE 8 can haz padding }) .mouseenter(function(){ $(this).css("width", "auto"); }) .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); });
-one
Jun 12 '13 at 12:26
source share


More articles:


All Articles