44

I have a list of countries, some with a very long name:

<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

By default, the select box would be as long as the longest option in the list. I want to create a select box such that it exhibits the default behaviour when viewed from a wide browser window, but fit in nicely to 90% of container width when viewed from a narrow browser window, smaller than the length of the longest option.

I tried min-width: 90%;, but it didn't work. Can this be done by CSS styling alone?

Question Overflow
  • 10,925
  • 18
  • 72
  • 110
  • http://stackoverflow.com/questions/294040/how-to-expand-select-option-width-after-the-user-wants-to-select-an-option – Dhiraj May 20 '12 at 07:40
  • @DhirajBodicherla: I think that doesn't answer my question. Does it? – Question Overflow May 20 '12 at 07:43
  • 1
    possible duplicate of [How to make select elements shrink to max-width percent style within fieldset](http://stackoverflow.com/questions/10672586/how-to-make-select-elements-shrink-to-max-width-percent-style-within-fieldset) – GregD Sep 18 '15 at 11:33
  • 2
    @GregD, both questions are mine, they may look the same, but they are not duplicate of each other. The other question is specific to a problem I have while adopting the selected answer in this question. – Question Overflow Sep 19 '15 at 14:08
  • @QuestionOverflow - ok, no problem. – GregD Sep 19 '15 at 20:47

4 Answers4

46

USE style="max-width:90%;" 

<select name=countries  style="max-width:90%;">
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

LIVE DEMO

Krishanu Dey
  • 6,326
  • 7
  • 51
  • 69
8

You've simply got it backwards. Specifying a minimum width would make the select menu always be at least that width, so it will continue expanding to 90% no matter what the window size is, also being at least the size of its longest option.

You need to use max-width instead. This way, it will let the select menu expand to its longest option, but if that expands past your set maximum of 90% width, crunch it down to that width.

animuson
  • 53,861
  • 28
  • 137
  • 147
  • But how to crunch it down? Can I have two max-widths? – Question Overflow May 20 '12 at 08:04
  • 1
    The browser does all the crunching. – animuson May 20 '12 at 08:06
  • 1
    Apparently, max-width doesn't work on select tag. I am using the lastest version of firefox, not sure about the rest. – Question Overflow May 20 '12 at 08:09
  • 1
    You can have different values of `max-width` (`auto` included) in different situations with the help of Media Queries. The latter will help you manage what you think a "narrow/wide browser window" for your particular design, if needed. Unrelated, browsers have a LOT of freedom when it's related to forms. Like cropping options larger than select in IE6/7... – FelipeAls May 20 '12 at 08:12
  • @FelipeAlsacreations: good point. Thanks, I will certainly look into media queries. Can we have a confirmation that `max-width` on select is working in other browsers. Just a yes/no will do. Thanks. – Question Overflow May 20 '12 at 08:16
  • Wasn't clear for me either but no it won't: you can't define the width of a parent based on the width of its chidlren, and that's what select / option are. `max-width: 90%` works at least in Fx, but that's 90% of the parent `div`... – FelipeAls May 20 '12 at 08:20
  • Additional note on MQ: smartphones take extra care of select/option, they've dedicated UI for that so no need to restrict width or whatever, that would be counter-productive I think. As for tablet (circa 768px), same for iPad but I don't know what others like Playbook BlackBerry and Samsung and countless others do – FelipeAls May 20 '12 at 08:23
  • @FelipeAlsacreations: thanks for your input regarding smartphones. You understood my intention quite well. – Question Overflow May 20 '12 at 08:27
4

Add div wrapper

<div id=myForm>
<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>
</div>

and then write CSS

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

Hope this will help.

Rahi.Shah
  • 1,305
  • 11
  • 20
0

Just so I can find this solution in the future:

I tried very hard to find a solution strictly in CSS, but nothing worked as I'd liked.

I am posting here my jQuery solution that works. It shrinks and expands the select based on the selected option.

    // Auto resizing the SELECT element according to selected OPTION's width
    $(function() {
        let arrowWidth = 25;
    
        $.fn.resizeselect = function(settings) {
          return this.each(function() { 
    
            $(this).change(function(){
              let $this = $(this);
    
              // get font-weight, font-size, and font-family
              let style = window.getComputedStyle(this)
              let { fontWeight, fontSize, fontFamily } = style
    
              // create test element
              let text = $this.find("option:selected").text();
              let $test = $("<span>").html(text).css({
                "font-size": fontSize, 
                "font-weight": fontWeight, 
                "font-family": fontFamily,
                "visibility": "hidden" // prevents FOUC
              });
    
              // add to body, get width, and get out
              $test.appendTo($this.parent());
              let width = $test.width();
              $test.remove();
    
              // set select width
              $this.width(width + arrowWidth);
    
              // run on start
            }).change();
    
          });
        };
    
        // Run by default 100ms after page load
        setTimeout(function() { 
            $("select.filter-dropdown").resizeselect();         
        }, 100);   
    })
select.filter-dropdown{
   width: 150px;
   font-weight: 500;
   font-size: 16px;
   margin-right: 10px;
}
<div class="wrapper">
  <select class="filter-dropdown">
    <option>All Options</option>
      <option>Value 1</option>
      <option>Long Modifications</option>
      <option>Your very welcome for saving your live.</option>
  </select>

  <select class="filter-dropdown">
    <option value="">All Service Types</option>
      <option>Short Value</option>
      <option>Longer Value here</option>
      <option>Extremely looooooooooooooong value here</option>
  </select>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
mateostabio
  • 958
  • 8
  • 11