CSS stop dropdown option changing size?

Question

I am trying to stop this drop down box from changing size whenever it has an option in it that is longer than the set 200px width of the dropdown box. The options are just being loaded by a json file - the issue can be seen below in images:

The list loads a selection of game names, when the list loads if there is an option that isn't longer than the dropdown menu it is fine and is the correct width as shown by the red line:

http://postimg.org/image/dxx0u0wup/

But as soon as it has an option in it that is longer than the dropdown it results in this : (The red line indicates the end of a window but it is currently transparent so the form you see is simply a div centred in a window)

http://postimg.org/image/kbtf1xs1d/full/

you can see the css I used, firstly I tried setting different widths but none of them changed anything then I thought it could be something to do with overflow but that didn't work either

HTML for the dropdown

    <label for="state">Games: </label>
    <select id="gamesSelect" name="gamesSelect">
    </select>

then the JS that fills it

function loadGames() {

              console.log("Getting games list");

              $.getJSON("games.json", function (games) {

                  console.log(games);

                  var gamesSelect = document.getElementById("gamesSelect");
                  for (var i = 0; i < games.array.length; i++) {
                      var opt = games.array[i];
                      var el = document.createElement("option");
                      el.textContent = opt;
                      el.value = opt;
                      el.width = "200";
                      gamesSelect.appendChild(el);
                  }


              });

        }

some people are saying its a duplicate, it is but only because the answers did not work for me - it is the same sort of issue but none were working so I made this

Can you post the code for the dropdown or link to a site with it? — Dan, Jul 18 '14 at 13:57
What about the CSS that is affecting this dropdown? What CSS do you see when you right-click inspect element on the dropdown? — Dan, Jul 18 '14 at 14:01
Tried that, tried select, option { width: 200px; } and then also #gamesSelect, option { width: 200px; } — user3195250, Jul 18 '14 at 14:02
possible duplicate of [Set width of dropdown element in HTML select dropdown options](http://stackoverflow.com/questions/1702186/set-width-of-dropdown-element-in-html-select-dropdown-options) — Popnoodles, Jul 18 '14 at 14:03
Putting width:auto; on the #gamesSelect, option made everything on the page do what the option was doing before and just carrying off the page :/ — user3195250, Jul 18 '14 at 14:04
might be a duplication but I already tried these things thats why I posted here :( max width yields no results and still gets wider — user3195250, Jul 18 '14 at 14:08
set `white-space:pre-wrap;` to `#gamesSelect` so whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks — rob, Jul 18 '14 at 14:08
using this script could help you http://www.icant.co.uk/forreview/tamingselect/ — logan Sarav, Jul 18 '14 at 14:15
Nope didn't work :/ I'll try the script and see if it works :) — user3195250, Jul 18 '14 at 14:18
You could truncate the text of each option to be realistic it's not even an issue worth "fixing"; Reducing the text that's there for a purpose will cause a UX issue - the user can't see the full title. — Popnoodles, Jul 18 '14 at 15:15
I figured it looked a bit ugly but actually you have a good point :L Thanks — user3195250, Jul 18 '14 at 15:21

score 0 · Answer 1 · edited Jun 02 '15 at 14:55

0

Change the code as follows:

#gameSelect
{
  width:200px;
  overflow:scroll;
}

#gameSelect option
{
  width:200px;
  overflow:scroll;
}

edited Jun 02 '15 at 14:55

Nisse Engström

4,738
23
27
42

answered Jul 18 '14 at 15:03

Rai Ammad Khan

1,521
2
14
26

thanks but didn't work :/ Just made everything overflow : http://postimg.org/image/ep2dssx0n/ – user3195250 Jul 18 '14 at 15:09

CSS stop dropdown option changing size?

1 Answers1