Select dropdown with fixed width cutting off content in IE

Question

The issue   Some of the items in the select require more than the specified width of 145px in order to display fully   Firefox behavior  clicking on the select reveals the dropdown elements list adjusted to the width of the longest element   IE6  amp  IE7 behavior  clicking on the select reveals the dropdown elements list restricted to 145px width making it impossible to read the longer elements   The current UI requires us to fit this dropdown in 145px and have it host items with longer descriptions    Any advise on resolving the issue with IE   The top element should remain 145px wide even when the list is expanded   Thank you   The 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      Here s the select input code  there s no definition for the backend dropbox style at this time    lt select id  select 1  class  center pull backend dropbox  name  select 1  gt   lt option value  -1  selected  selected  gt Browse options lt  option gt   lt option value  -1  gt ------------------------------------ lt  option gt   lt option value  224  gt Option 1 lt  option gt   lt option value  234  gt Longer title for option 2 lt  option gt   lt option value  242  gt Very long and extensively descriptive title for option 3 lt  option gt   lt  select gt    Full html page in case you want to quickly test in a browser    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt dropdown test lt  title gt    lt style type  text css  gt   lt  -- 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    -- gt   lt  style gt   lt  head gt    lt body gt   lt p gt Select width test lt  p gt   lt form id  form1  name  form1  method  post  action    gt   lt select id  select 1  class  center pull backend dropbox  name  select 1  gt   lt option value  -1  selected  selected  gt Browse options lt  option gt   lt option value  -1  gt ------------------------------------ lt  option gt   lt option value  224  gt Option 1 lt  option gt   lt option value  234  gt Longer title for option 2 lt  option gt   lt option value  242  gt Very long and extensively descriptive title for option 3 lt  option gt   lt  select gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

I wanted this to work with selects that I added dynamically to the page, so after a lot of experimentation, I ended up giving all the selects that I wanted to do this with the class "fixedwidth", 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 couple of things to note:

In spite of the fact that my selects are all in a table, I had to do "on" to the jQuery(document).on instead of to jQuery('table#System_table').on
In spite of the fact that the jQuery documentation says to use "mouseleave" instead of "blur", I found that in IE7 when I moved the mouse down the drop down list, it would get a mouseleave event but not a blur.

User · Answer

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

User · Answer

A different approach    instead of a select make it an edit box  disabled so noone can enter anything manually or change contents after selection another hidden edit to contain an id of a selected option  explained below  make a button      and script it to show that div below make a hidden div with absolute position under or near the edit box 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  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 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

User · Answer

Here is a little script that should help you out   http   www icant co uk forreview tamingselect

User · Answer

I found a pretty straightforward fix for this  In the  lt select gt  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

User · Answer

A pure css solution   http   bavotasan com 2011 style-select-box-using-only-css    x000D   x000D   styled-select select   x000D     background  transparent  x000D     width  268px  x000D     padding  5px  x000D     font-size  16px  x000D     line-height  1  x000D     border  0  x000D     border-radius  0  x000D     height  34px  x000D     -webkit-appearance  none  x000D       x000D   x000D   styled-select   x000D     width  240px  x000D     height  34px  x000D     overflow  hidden  x000D     background  url http   cdn bavotasan com wp-content uploads 2011 05 down arrow select jpg  no-repeat right  ddd  x000D     border  1px solid  ccc  x000D       x000D   lt div class  styled-select  gt  x000D      lt select gt  x000D         lt option gt Here is the first option lt  option gt  x000D         lt option gt The second option lt  option gt  x000D      lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A full fledged jQuery plugin is available  check out the demo page  http   powerkiki github com ie expand select width   disclaimer  I coded that thing  patches welcome

User · Answer

for  i 1 i lt  5 i        idname    Usert    i     document getElementById idname  style width    100         I used this way to showed the drop down list when the width is not showed correctly   It work for IE6  Firefox and Chrome

User · Answer

I ve got yet another contribution to this   I wrote this a while back that you may find helpful  http   dpatrickcaldwell blogspot com 2011 06 giantdropdown-jquery-plugin-for-styling html  It s a jquery plugin to make a styleable unordered list backed by the hidden select element   The source is on github  https   github com tncbbthositg GiantDropdown  You d be able to handle behaviors and styles on the UL that you can t with the SELECT   Everything else should be the same because the select list is still there  it s just hidden but the UL will use it as a backing data store  if you will

User · Answer

Here is a solution that actually works    It sets the width in IE and doesn t mess up your page layout and doesn t close the dropdown when you mouse over the select options like some of the other solutions on this page    You will need however to change the margin-right value and width values to match what you have for your select fields    Also you can replace the    select   with     Your Select ID HERE   to only effect a specific select field  As well you will need to call the function fixIESelect   on the body onload or via jQuery using DOM ready as I did 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

User · Answer

For my layout  I didn t want a hack  no width increasing  no on click with auto and then coming to original   It broke my existing layout  I just wanted it to work normally like other browsers    I found this to be exactly like that  -  http   www jquerybyexample net 2012 05 fix-for-ie-select-dropdown-with-fixed html

User · Answer

similar solution can be found here using jquery to set the auto width when focus  or mouseenter  and set the orignal width back when blur  or mouseleave  http   css-tricks com select-cuts-off-options-in-ie-fix

User · Answer

The jquery BalusC s solution improved by me  Used also  Brad Robertson s comment here   Just put this in a  js  use the wide class for your desired combos and don t forge to give it an Id  Call the function in the onload  or documentReady or whatever   As simple ass that    It will use the width that you defined for the combo as minimun length   function fixIeCombos         if    browser msie  amp  amp    browser version  lt  9        var style       lt style gt select expand   width  auto    lt  style gt            html  gt  head   append style        var defaultWidth    200           get predefined combo s 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  gt  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

User · Answer

For IE 8 there is a simple pure css-based solution   select focus       width  auto      position  relative       You need to set the position property  if the selectbox is child of a container with fixed width    Unfortunately IE 7 and less do not support the  focus selector

User · Answer

A workaround if you don t care about the strange view after an option is selected  i e  Select to jump to a new page     lt  -- Limit width of the wrapping div instead of the select and use  overflow  hidden  to hide the right part of it  -- gt   lt div style  width  145px  overflow  hidden  border-right  1px solid  aaa   gt     lt select onchange  jump     gt       lt  --   amp  9660      produces a fake dropdown indicator -- gt       lt option value    gt Jump to      amp  9660  lt  option gt       lt option value  1  gt http   stackoverflow com questions 682764 select-dropdown-with-fixed-width-cutting-off-content-in-ie lt  option gt             lt  select gt   lt  div gt

User · Answer

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

User · Answer

Its tested in all version of IE  Chrome  FF  amp  Safari     JavaScript code       lt script type  text javascript  gt       lt  -- begin hiding     function expandSELECT sel          sel style width                 function contractSELECT sel          sel style width    100px                end hiding -- gt       lt  script gt      Html code       lt select name  sideeffect  id  sideeffect   style  width 100px   onfocus  expandSELECT this    onblur  contractSELECT this     gt         lt option value  0  selected  selected  readonly  readonly  gt Select lt  option gt       lt option value  1   gt Apple lt  option gt       lt option value  2   gt Orange   Banana   Grapes lt  option gt

User · Answer

Why would anyone want a mouse over event on a drop down list  Here s a way of manipulating IE8 for the way a drop down list should work   First  let s make sure we are only passing our function in IE8       var isIE8     browser version substring 0  2       8        if  isIE8             fix me code         Then  to allow the select to expand outside of the content area  let s wrap our drop down lists in div s 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   lt div class  wrapper  style  position relative  display  inline-block  float  left   gt  lt  div gt    css  position    absolute               helper function for fix         ddlFix            Now onto the events  Since IE8 throws an event after focusing in for whatever reason  IE will close the widget after rendering when trying to expand  The work around will be to bind to  focusin  and  focusout  a class that will auto expand based on the longest option text  Then  to ensure a constant min-width that doesn t shrink past the default value  we can obtain the current select list width  and set it to the drop down list min-width property on 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                Lastly  make sure to add this class in the style sheet    select focus  select expand       width  auto

User · Answer

Small  but hopefully useful update to the code from MainMa  amp  user558204  thanks guys   which removes the unnecessary each loop  stores a copy of   this  in a variable in each event handler as it s used more than once  also combined the blur  amp  change events as they had the same action   Yes  it s still not perfect as it resizes the select element  rather than just the drop-down options   But hey  it got me out of a pickle  I  very  very unfortunately  still have to support an IE6-dominant user base across 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     lt  -- if gt IE        v       gt  lt i gt  lt  i gt  lt   endif -- gt        all 0         return v  gt  4   v   undef           function badFixSelectBoxDataWidthIE       if  ie  lt  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    lt  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

User · Answer

I did Google about this issue but didn t find any best solution  So Created a solution that works fine in all browsers   just call badFixSelectBoxDataWidthIE   function on page load   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    lt  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

User · Answer

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

User · Answer

For a simple Javascript-free solution  adding a title-attribute to your  lt option gt s holding the text might be enough  depending on your requirements    lt option value  242  title  Very long and extensively descriptive text  gt    Very long and extensively descriptive text  lt  option gt    This will show the cut-off text in a tool-tip fashion on hovering the  lt option gt   regardless of the width of the  lt select gt     Works for IE7

User · Answer

Simply you can use this plugin for jquery      http   plugins jquery com project skinner    function                  select1   skinner   width   200px

[html] Select dropdown with fixed width cutting off content in IE

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to html-select