Dropdownlist width in IE

Question

In IE  the dropdown-list takes the same width as the dropbox  I hope I am making sense  whereas in Firefox the dropdown-list s width varies according to the content    This basically means that I have to make sure that the dropbox is wide enough to display the longest selection possible  This makes my page look very ugly     Is there any workaround for this problem   How can I use CSS to set different widths for dropbox and the dropdownlist

User · Answer

This seems to work with IE6 and doesn t appear to break others  The other nice thing is that it changes the menu automatically as soon as you change your drop down selection     document  ready function            dropdown   mouseover function            if   browser msie                  this  css  width   auto                              dropdown   change function            if    browser msie                    dropdown   trigger  mouseover

User · Answer

Here s another jQuery based example  In contrary to all the other answers posted here  it takes all keyboard and mouse events into account  especially clicks   if     support leadingWhitespace       if IE6 7 8        select wide            bind  focus mouseover   function       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            Use it in combination with this piece of CSS   select       width  150px     Or whatever width you want       select expand       width  auto      All you need to do is to add the class wide to the dropdown element s  in question    lt select class  wide  gt           lt  select gt    Here is a jsfiddle example  Hope this helps

User · Answer

BalusC s answer above works great  but there is a small fix I would add if the content of your dropdown has a smaller width than what you define in your CSS select expand  add this to the mouseover bind    bind  mouseover   function       this  addClass  expand   removeClass  clicked                                    if    this  width    lt  300     put your desired minwidth here                                                                         this  removeClass  expand

User · Answer

Creating your own drop down list is more of a pain than it s worth  You can use some JavaScript to make the IE drop down work   It uses a bit of the YUI library and a special extension for fixing IE select boxes   You will need to include the following and wrap your  lt select gt  elements in a  lt span class  select-box  gt   Put these before the body tag of your page    lt script src  http   us js2 yimg com us js yimg com lib common utils 2 yahoo 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 event 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 dom 2 0 2-b3 js  type  text javascript  gt   lt  script gt   lt script src  ie-select-width-fix js  type  text javascript  gt   lt  script gt   lt script gt     for each select box you want to affect  apply this  var s1   new YAHOO Hack FixIESelectWidth   s1        s1 is the ID of the select box you want to affect  lt  script gt    Post acceptance edit   You can also do this without the YUI library and Hack control  All you really need to do is put an onmouseover  this style width  auto   onmouseout  this style width  100px    or whatever you want  on the select element  The YUI control gives it that nice animation but it s not necessary  This task can also be accomplished with jquery and other libraries  although  I haven t found explicit documentation for this   -- amendment to the edit  IE has a problem with the onmouseout for select controls  it doesn t consider mouseover on options being a mouseover on the select   This makes using a mouseout very tricky  The first solution is the best I ve found so far

User · Answer

So far there isn t one  Don t know about IE8 but it cannot be done in IE6  amp  IE7  unless you implement your own dropdown list functionality with javascript  There are examples how to do it on the web  though I don t see much benefit in duplicating existing functionality

User · Answer

check this out   it s not perfect but it works and it s for IE only and doesn t affect FF  I used the regular javascript for onmousedown to establish IE only fix   but the msie from jquery could be used as well in the onmousedown   the main idea is the  onchange  and on blur to have the select box return to normal    decide you re own width for those  I needed 35     onmousedown  javascript if navigator appName   Microsoft Internet Explorer   this style width  auto     onchange  this style width  35    onblur  this style width  35

User · Answer

check this out   it s not perfect but it works and it s for IE only and doesn t affect FF  I used the regular javascript for onmousedown to establish IE only fix   but the msie from jquery could be used as well in the onmousedown   the main idea is the  onchange  and on blur to have the select box return to normal    decide you re own width for those  I needed 35     onmousedown  javascript if navigator appName   Microsoft Internet Explorer   this style width  auto     onchange  this style width  35    onblur  this style width  35

User · Answer

I thought I d throw my hat in the ring  I make a SaaS application and I had a select menu embedded inside a table  This method worked  but it skewed everything in the table   onmousedown  if navigator appName   Microsoft Internet Explorer   this style position  absolute  this style width  auto   onblur  if navigator appName   Microsoft Internet Explorer   this style position     this style width   225px       So what I did to make it all better was throw the select inside a z-indexed div    lt td valign  top  style  width 225px  overflow hidden   gt       lt div style  position  absolute  z-index  5   onmousedown  var select   document getElementById  select    if navigator appName   Microsoft Internet Explorer   select style position  absolute  select style width  auto    gt           lt select name  select name  id  select  style  width  225px   onblur  if navigator appName   Microsoft Internet Explorer   this style position     this style width   225px     onChange  reportFormValues  filter  lt    job id  gt    form values    gt               lt option value  0  gt All lt  option gt               lt  --More Options-- gt           lt  select gt       lt  div gt   lt  td gt

User · Answer

Thad you need to add a blur event handler as well    document  ready function            dropdown   mousedown function            if   browser msie                  this  css  width   auto                              dropdown   change function            if    browser msie                  this  css  width   175px                              dropdown   blur function            if    browser msie                  this  css  width   175px                            However  this will still expand the selectbox on click  instead of just the elements   and it seems to fail in IE6  but works perfectly in Chrome and IE7

User · Answer

There is no way to do it in IE6 IE7 IE8  The control is drawn by the app and IE simply doesn t draw it that way  Your best bet is to implement your own drop-down via simple HTML CSS JavaScript if it s that important to have the the drop-down one width and the list another width

User · Answer

this is the best way to do this   select focus      min-width 165px      width auto      z-index 9999999999      position absolute      it s exactly the same like BalusC solution   Only this is easier

User · Answer

http   developer yahoo com yui examples button button-menu-select html

User · Answer

The hedgerwow link  the YUI animation work-around  in the first best answer is broken  I guess the domain got expired  I copied the code before it got expired  so you can find it here  owner of code can let me know if I am breaching any copyrights by uploading it again   http   ciitronian com blog programming yui-button-mimicking-native-select-dropdown-avoid-width-problem   On the same blog post I wrote about making an exact same SELECT element like the normal one using YUI Button menu  Have a look and let me know if this helps

User · Answer

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

User · Answer

There is no way to do it in IE6 IE7 IE8  The control is drawn by the app and IE simply doesn t draw it that way  Your best bet is to implement your own drop-down via simple HTML CSS JavaScript if it s that important to have the the drop-down one width and the list another width

User · Answer

http   developer yahoo com yui examples button button-menu-select html

User · Answer

The hedgerwow link  the YUI animation work-around  in the first best answer is broken  I guess the domain got expired  I copied the code before it got expired  so you can find it here  owner of code can let me know if I am breaching any copyrights by uploading it again   http   ciitronian com blog programming yui-button-mimicking-native-select-dropdown-avoid-width-problem   On the same blog post I wrote about making an exact same SELECT element like the normal one using YUI Button menu  Have a look and let me know if this helps

User · Answer

There is no way to do it in IE6 IE7 IE8  The control is drawn by the app and IE simply doesn t draw it that way  Your best bet is to implement your own drop-down via simple HTML CSS JavaScript if it s that important to have the the drop-down one width and the list another width

User · Answer

I ve had to work around this issue and once came up with a pretty complete and scalable solution working for IE6  7 and 8  and compatible with other browsers obviously   I ve written a whole article about it right here  http   www edgeoftheworld fr wp work dealing-with-fixed-sized-dropdown-lists-in-internet-explorer  Thought I d share this for people who are still running into this problem  as none of the above solutions work in every case  in my opinion

User · Answer

A full fledged jQuery plugin is available  It supports non-breaking layout and keyboard interactions  check out the demo page  http   powerkiki github com ie expand select width   disclaimer  I coded that thing  patches welcome

User · Answer

There is no way to do it in IE6 IE7 IE8  The control is drawn by the app and IE simply doesn t draw it that way  Your best bet is to implement your own drop-down via simple HTML CSS JavaScript if it s that important to have the the drop-down one width and the list another width

User · Answer

So far there isn t one  Don t know about IE8 but it cannot be done in IE6  amp  IE7  unless you implement your own dropdown list functionality with javascript  There are examples how to do it on the web  though I don t see much benefit in duplicating existing functionality

User · Answer

if you want a simple dropdown  amp  or flyout menu with no transition effects just use CSS    you can force IE6 to support  hover on all element using an  htc file  css3hover   with behavior  IE6 only property  defined in the conditionally attached CSS file

User · Answer

This is something l have done taking bits from other people s stuff             document  ready function              if  document all                      lt   cboDisability ClientID   gt    mousedown function                           lt   cboDisability ClientID   gt    css    width    auto                                        lt   cboDisability ClientID   gt    blur function                        this  css    width    208px                                        lt   cboDisability ClientID   gt    change function                           lt   cboDisability ClientID   gt    css    width    208px                                        lt   cboEthnicity ClientID   gt    mousedown function                           lt   cboEthnicity ClientID   gt    css    width    auto                                        lt   cboEthnicity ClientID   gt    blur function                        this  css    width    208px                                        lt   cboEthnicity ClientID   gt    change function                           lt   cboEthnicity ClientID   gt    css    width    208px                                           where cboEthnicity and cboDisability are dropdowns with option text wider than the width of the select itself    As you can see  l have specified document all as this only works in IE   Also  l encased the dropdowns within div elements like this    lt div id  dvEthnicity  style  width  208px  overflow  hidden  position  relative  float  right   gt  lt asp DropDownList CssClass  select  ID  cboEthnicity  runat  server  DataTextField  description  DataValueField  id  Width  200px  gt  lt  asp DropDownList gt  lt  div gt    This takes care of the other elements moving out of place when your dropdown expands   The only downside here is that the menulist visual disappears when you are selecting but returns as soon as you have selected   Hope this helps someone

User · Answer

you could just try the following       styleClass  someStyleWidth    onmousedown  javascript if navigator appName   Microsoft Internet Explorer   this style position  absolute  this style width  auto       onblur  this style position    this style width       I tried and it works for me  Nothing else is required

User · Answer

You can add a style directly to the select element    lt select name  foo  style  width  200px  gt   So this select item will be 200 pixels wide   Alternatively you can apply a class or id to the element and reference it in a stylesheet

User · Answer

I thought I d throw my hat in the ring  I make a SaaS application and I had a select menu embedded inside a table  This method worked  but it skewed everything in the table   onmousedown  if navigator appName   Microsoft Internet Explorer   this style position  absolute  this style width  auto   onblur  if navigator appName   Microsoft Internet Explorer   this style position     this style width   225px       So what I did to make it all better was throw the select inside a z-indexed div    lt td valign  top  style  width 225px  overflow hidden   gt       lt div style  position  absolute  z-index  5   onmousedown  var select   document getElementById  select    if navigator appName   Microsoft Internet Explorer   select style position  absolute  select style width  auto    gt           lt select name  select name  id  select  style  width  225px   onblur  if navigator appName   Microsoft Internet Explorer   this style position     this style width   225px     onChange  reportFormValues  filter  lt    job id  gt    form values    gt               lt option value  0  gt All lt  option gt               lt  --More Options-- gt           lt  select gt       lt  div gt   lt  td gt

User · Answer

In jQuery this works fairly well   Assume the dropdown has id  dropdown      document  ready function             dropdown   mousedown function        if   browser msie              this  css  width   auto                          dropdown   change function        if    browser msie              this  css  width   175px

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

Creating your own drop down list is more of a pain than it s worth  You can use some JavaScript to make the IE drop down work   It uses a bit of the YUI library and a special extension for fixing IE select boxes   You will need to include the following and wrap your  lt select gt  elements in a  lt span class  select-box  gt   Put these before the body tag of your page    lt script src  http   us js2 yimg com us js yimg com lib common utils 2 yahoo 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 event 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 dom 2 0 2-b3 js  type  text javascript  gt   lt  script gt   lt script src  ie-select-width-fix js  type  text javascript  gt   lt  script gt   lt script gt     for each select box you want to affect  apply this  var s1   new YAHOO Hack FixIESelectWidth   s1        s1 is the ID of the select box you want to affect  lt  script gt    Post acceptance edit   You can also do this without the YUI library and Hack control  All you really need to do is put an onmouseover  this style width  auto   onmouseout  this style width  100px    or whatever you want  on the select element  The YUI control gives it that nice animation but it s not necessary  This task can also be accomplished with jquery and other libraries  although  I haven t found explicit documentation for this   -- amendment to the edit  IE has a problem with the onmouseout for select controls  it doesn t consider mouseover on options being a mouseover on the select   This makes using a mouseout very tricky  The first solution is the best I ve found so far

User · Answer

BalusC s answer above works great  but there is a small fix I would add if the content of your dropdown has a smaller width than what you define in your CSS select expand  add this to the mouseover bind    bind  mouseover   function       this  addClass  expand   removeClass  clicked                                    if    this  width    lt  300     put your desired minwidth here                                                                         this  removeClass  expand

User · Answer

Here s another jQuery based example  In contrary to all the other answers posted here  it takes all keyboard and mouse events into account  especially clicks   if     support leadingWhitespace       if IE6 7 8        select wide            bind  focus mouseover   function       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            Use it in combination with this piece of CSS   select       width  150px     Or whatever width you want       select expand       width  auto      All you need to do is to add the class wide to the dropdown element s  in question    lt select class  wide  gt           lt  select gt    Here is a jsfiddle example  Hope this helps

User · Answer

If you use jQuery then try out this IE select width plugin   http   www jainaewen com files javascript jquery ie-select-style   Applying this plugin makes the select box in Internet Explorer appear to work as it would work in Firefox  Opera etc by allowing the option elements to open at full width without loosing the look and style of the fixed width  It also adds support for padding and borders on the select box in Internet Explorer 6 and 7

User · Answer

So far there isn t one  Don t know about IE8 but it cannot be done in IE6  amp  IE7  unless you implement your own dropdown list functionality with javascript  There are examples how to do it on the web  though I don t see much benefit in duplicating existing functionality

User · Answer

Creating your own drop down list is more of a pain than it s worth  You can use some JavaScript to make the IE drop down work   It uses a bit of the YUI library and a special extension for fixing IE select boxes   You will need to include the following and wrap your  lt select gt  elements in a  lt span class  select-box  gt   Put these before the body tag of your page    lt script src  http   us js2 yimg com us js yimg com lib common utils 2 yahoo 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 event 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 dom 2 0 2-b3 js  type  text javascript  gt   lt  script gt   lt script src  ie-select-width-fix js  type  text javascript  gt   lt  script gt   lt script gt     for each select box you want to affect  apply this  var s1   new YAHOO Hack FixIESelectWidth   s1        s1 is the ID of the select box you want to affect  lt  script gt    Post acceptance edit   You can also do this without the YUI library and Hack control  All you really need to do is put an onmouseover  this style width  auto   onmouseout  this style width  100px    or whatever you want  on the select element  The YUI control gives it that nice animation but it s not necessary  This task can also be accomplished with jquery and other libraries  although  I haven t found explicit documentation for this   -- amendment to the edit  IE has a problem with the onmouseout for select controls  it doesn t consider mouseover on options being a mouseover on the select   This makes using a mouseout very tricky  The first solution is the best I ve found so far

User · Answer

A full fledged jQuery plugin is available  It supports non-breaking layout and keyboard interactions  check out the demo page  http   powerkiki github com ie expand select width   disclaimer  I coded that thing  patches welcome

User · Answer

you could just try the following       styleClass  someStyleWidth    onmousedown  javascript if navigator appName   Microsoft Internet Explorer   this style position  absolute  this style width  auto       onblur  this style position    this style width       I tried and it works for me  Nothing else is required

User · Answer

I tried all of these solutions and none worked completely for me   This is what I came up with    document  ready function       var clicknum   0       dropdown   click          function                 clicknum                if  clicknum    2                    clicknum   0                    this  css  position                          this  css  width                                 blur          function                   this  css  position                      this  css  width                    clicknum   0             focus          function                   this  css  position    relative                  this  css  width    auto               mousedown          function                   this  css  position    relative                  this  css  width    auto                   jQuery     Be sure to add a dropdown class to each dropdown in your html  The trick here is using the specialized click function  I found it here Fire event each time a DropDownList item is selected with jQuery    Many of the other solutions on here use the event handler change  which works well but won t trigger if the user selects the same option as was previously selected    Like many of the other solutions  focus and mousedown is for when the user puts the dropdown in focus  blur is for when they click away   You may also want to stick some kind of browser detection in this so it only effects ie   It doesn t look bad in other browsers though

User · Answer

In jQuery this works fairly well   Assume the dropdown has id  dropdown      document  ready function             dropdown   mousedown function        if   browser msie              this  css  width   auto                          dropdown   change function        if    browser msie              this  css  width   175px

User · Answer

I tried all of these solutions and none worked completely for me   This is what I came up with    document  ready function       var clicknum   0       dropdown   click          function                 clicknum                if  clicknum    2                    clicknum   0                    this  css  position                          this  css  width                                 blur          function                   this  css  position                      this  css  width                    clicknum   0             focus          function                   this  css  position    relative                  this  css  width    auto               mousedown          function                   this  css  position    relative                  this  css  width    auto                   jQuery     Be sure to add a dropdown class to each dropdown in your html  The trick here is using the specialized click function  I found it here Fire event each time a DropDownList item is selected with jQuery    Many of the other solutions on here use the event handler change  which works well but won t trigger if the user selects the same option as was previously selected    Like many of the other solutions  focus and mousedown is for when the user puts the dropdown in focus  blur is for when they click away   You may also want to stick some kind of browser detection in this so it only effects ie   It doesn t look bad in other browsers though

User · Answer

Creating your own drop down list is more of a pain than it s worth  You can use some JavaScript to make the IE drop down work   It uses a bit of the YUI library and a special extension for fixing IE select boxes   You will need to include the following and wrap your  lt select gt  elements in a  lt span class  select-box  gt   Put these before the body tag of your page    lt script src  http   us js2 yimg com us js yimg com lib common utils 2 yahoo 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 event 2 0 0-b3 js  type  text javascript  gt   lt  script gt   lt script src  http   us js2 yimg com us js yimg com lib common utils 2 dom 2 0 2-b3 js  type  text javascript  gt   lt  script gt   lt script src  ie-select-width-fix js  type  text javascript  gt   lt  script gt   lt script gt     for each select box you want to affect  apply this  var s1   new YAHOO Hack FixIESelectWidth   s1        s1 is the ID of the select box you want to affect  lt  script gt    Post acceptance edit   You can also do this without the YUI library and Hack control  All you really need to do is put an onmouseover  this style width  auto   onmouseout  this style width  100px    or whatever you want  on the select element  The YUI control gives it that nice animation but it s not necessary  This task can also be accomplished with jquery and other libraries  although  I haven t found explicit documentation for this   -- amendment to the edit  IE has a problem with the onmouseout for select controls  it doesn t consider mouseover on options being a mouseover on the select   This makes using a mouseout very tricky  The first solution is the best I ve found so far

User · Answer

Here is the simplest solution   Before I start  I must tell you dropdown select box will automatically expand in almost all the browsers except IE6  So  I would do a browser check  i e   IE6  and write the following only to that browser  Here it goes  First check for the browser   The code will magically expands the dropdown select box  The only problem with the solution is onmouseover the dropdown will be expanded to 420px  and because the overflow   hidden we are hiding the expanded dropdown size and showing it as 170px  so  the arrow at the right side of the ddl will be hidden and cannot be seen  but the select box will be expanded to 420px  which is what we really want  Just try the code below for yourself and use it if you like it    ctrDropDown       width 420px   lt  --this is the actual width of the dropdown list--  gt     ctrDropDownClick       width 420px   lt  -- this the width of the dropdown select box --  gt      lt div style  width 170px  overflow hidden   gt   lt asp DropDownList runat  server  ID  ddlApplication  onmouseout    this className  ctrDropDown    onmouseover   this className  ctrDropDownClick    class  ctrDropDown  onBlur  this className  ctrDropDown    onMouseDown  this className  ctrDropDownClick    onChange  this className  ctrDropDown    gt  lt  asp DropDownList gt   lt  div gt    The above is the IE6 CSS  The common CSS for all other browsers should be as below    ctrDropDown       width 170px   lt  --this is the actual width of the dropdown list--  gt     ctrDropDownClick       width auto   lt  -- this the width of the dropdown select box --  gt

User · Answer

If you use jQuery then try out this IE select width plugin   http   www jainaewen com files javascript jquery ie-select-style   Applying this plugin makes the select box in Internet Explorer appear to work as it would work in Firefox  Opera etc by allowing the option elements to open at full width without loosing the look and style of the fixed width  It also adds support for padding and borders on the select box in Internet Explorer 6 and 7

User · Answer

if you want a simple dropdown  amp  or flyout menu with no transition effects just use CSS    you can force IE6 to support  hover on all element using an  htc file  css3hover   with behavior  IE6 only property  defined in the conditionally attached CSS file

User · Answer

I used the following solution and it seems to work well in most situations    lt style gt  select width 100px   lt  style gt    lt html gt   lt select onmousedown  if   browser msie  this style position  absolute  this style width  auto    onblur  this style position    this style width     gt     lt option gt One lt  option gt     lt option gt Two - A long option that gets cut off in IE lt  option gt   lt  select gt   lt  html gt      Note  the   browser msie does require jquery

User · Answer

You can add a style directly to the select element    lt select name  foo  style  width  200px  gt   So this select item will be 200 pixels wide   Alternatively you can apply a class or id to the element and reference it in a stylesheet

User · Answer

You can add a style directly to the select element    lt select name  foo  style  width  200px  gt   So this select item will be 200 pixels wide   Alternatively you can apply a class or id to the element and reference it in a stylesheet

User · Answer

Here is the simplest solution   Before I start  I must tell you dropdown select box will automatically expand in almost all the browsers except IE6  So  I would do a browser check  i e   IE6  and write the following only to that browser  Here it goes  First check for the browser   The code will magically expands the dropdown select box  The only problem with the solution is onmouseover the dropdown will be expanded to 420px  and because the overflow   hidden we are hiding the expanded dropdown size and showing it as 170px  so  the arrow at the right side of the ddl will be hidden and cannot be seen  but the select box will be expanded to 420px  which is what we really want  Just try the code below for yourself and use it if you like it    ctrDropDown       width 420px   lt  --this is the actual width of the dropdown list--  gt     ctrDropDownClick       width 420px   lt  -- this the width of the dropdown select box --  gt      lt div style  width 170px  overflow hidden   gt   lt asp DropDownList runat  server  ID  ddlApplication  onmouseout    this className  ctrDropDown    onmouseover   this className  ctrDropDownClick    class  ctrDropDown  onBlur  this className  ctrDropDown    onMouseDown  this className  ctrDropDownClick    onChange  this className  ctrDropDown    gt  lt  asp DropDownList gt   lt  div gt    The above is the IE6 CSS  The common CSS for all other browsers should be as below    ctrDropDown       width 170px   lt  --this is the actual width of the dropdown list--  gt     ctrDropDownClick       width auto   lt  -- this the width of the dropdown select box --  gt

User · Answer

This seems to work with IE6 and doesn t appear to break others  The other nice thing is that it changes the menu automatically as soon as you change your drop down selection     document  ready function            dropdown   mouseover function            if   browser msie                  this  css  width   auto                              dropdown   change function            if    browser msie                    dropdown   trigger  mouseover

User · Answer

I used the following solution and it seems to work well in most situations    lt style gt  select width 100px   lt  style gt    lt html gt   lt select onmousedown  if   browser msie  this style position  absolute  this style width  auto    onblur  this style position    this style width     gt     lt option gt One lt  option gt     lt option gt Two - A long option that gets cut off in IE lt  option gt   lt  select gt   lt  html gt      Note  the   browser msie does require jquery

User · Answer

this is the best way to do this   select focus      min-width 165px      width auto      z-index 9999999999      position absolute      it s exactly the same like BalusC solution   Only this is easier

User · Answer

We have the same thing on an asp dropdownlist    In Firefox 3 0 5  the dropdown is the width of the longest item in the dropdown  which is like 600 pixels wide or something like that

User · Answer

Based on the solution posted by Sai  this is how to do it with jQuery     document  ready function         if    browser msie     select wide            bind  onmousedown   function       this  css  position  absolute  width  auto                 bind  blur   function       this  css  position  static  width

User · Answer

This is something l have done taking bits from other people s stuff             document  ready function              if  document all                      lt   cboDisability ClientID   gt    mousedown function                           lt   cboDisability ClientID   gt    css    width    auto                                        lt   cboDisability ClientID   gt    blur function                        this  css    width    208px                                        lt   cboDisability ClientID   gt    change function                           lt   cboDisability ClientID   gt    css    width    208px                                        lt   cboEthnicity ClientID   gt    mousedown function                           lt   cboEthnicity ClientID   gt    css    width    auto                                        lt   cboEthnicity ClientID   gt    blur function                        this  css    width    208px                                        lt   cboEthnicity ClientID   gt    change function                           lt   cboEthnicity ClientID   gt    css    width    208px                                           where cboEthnicity and cboDisability are dropdowns with option text wider than the width of the select itself    As you can see  l have specified document all as this only works in IE   Also  l encased the dropdowns within div elements like this    lt div id  dvEthnicity  style  width  208px  overflow  hidden  position  relative  float  right   gt  lt asp DropDownList CssClass  select  ID  cboEthnicity  runat  server  DataTextField  description  DataValueField  id  Width  200px  gt  lt  asp DropDownList gt  lt  div gt    This takes care of the other elements moving out of place when your dropdown expands   The only downside here is that the menulist visual disappears when you are selecting but returns as soon as you have selected   Hope this helps someone

User · Answer

Based on the solution posted by Sai  this is how to do it with jQuery     document  ready function         if    browser msie     select wide            bind  onmousedown   function       this  css  position  absolute  width  auto                 bind  blur   function       this  css  position  static  width

User · Answer

I ve had to work around this issue and once came up with a pretty complete and scalable solution working for IE6  7 and 8  and compatible with other browsers obviously   I ve written a whole article about it right here  http   www edgeoftheworld fr wp work dealing-with-fixed-sized-dropdown-lists-in-internet-explorer  Thought I d share this for people who are still running into this problem  as none of the above solutions work in every case  in my opinion

User · Answer

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

User · Answer

We have the same thing on an asp dropdownlist    In Firefox 3 0 5  the dropdown is the width of the longest item in the dropdown  which is like 600 pixels wide or something like that

User · Answer

You can add a style directly to the select element    lt select name  foo  style  width  200px  gt   So this select item will be 200 pixels wide   Alternatively you can apply a class or id to the element and reference it in a stylesheet

User · Answer

So far there isn t one  Don t know about IE8 but it cannot be done in IE6  amp  IE7  unless you implement your own dropdown list functionality with javascript  There are examples how to do it on the web  though I don t see much benefit in duplicating existing functionality

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

Thad you need to add a blur event handler as well    document  ready function            dropdown   mousedown function            if   browser msie                  this  css  width   auto                              dropdown   change function            if    browser msie                  this  css  width   175px                              dropdown   blur function            if    browser msie                  this  css  width   175px                            However  this will still expand the selectbox on click  instead of just the elements   and it seems to fail in IE6  but works perfectly in Chrome and IE7

[javascript] Dropdownlist width in IE

Examples related to javascript

Examples related to html

Examples related to internet-explorer

Examples related to drop-down-menu