CODEWITHSUNDEEP
cssgoogle-chromehtml-select
Rudie
Rudie

Reputation: 53831

<SELECT> wraps text to next line if small width in Chrome

The weirdest problem: my <select> elements wrap text to the next line if the width is set to 2em (smaller than the contents, but not that much). Only in Chrome! Firefox and IE 9 work fine.

enter image description here

Both dropdowns have 2 options: - and stripe. If the stripe option is selected (even during runtime!!) the element wraps like that.

Opening works like it always does and should: the options overflow to required width:

enter image description here

The simple version with all relevant CSS: jsfiddle (the fiddle isn't broken for me)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}
.bookmarks .change-group select {
  width: 2em;
  /* overflow: hidden; tried this - no difference */
}
/* chrome tells me <select> inherits from this one: */
.bookmarks, .bookmarks li {
  list-style: none;
}

and the HTML (but without any white space):

<div class="change-group">
  <select>
    <option value>-</option>
    <option value="stripe">stripe</option>
  </select>
</div>

(That's really all the applicable CSS!) The <select> is inside a <div> that floats left, but the fiddle works the same so that's probably not it. I've disabled all CSS and nothing helped, only removing the width: 2em works.

In case the problem isn't clear: I don't want that. It should behave like in FF and IE: tiny until you open it.

Upvotes: 1

Views: 5445

Answers (2)

aleks korovin
aleks korovin

Reputation: 744

Could you try to set for select:

white-space: nowrap;

Upvotes: 0

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

Have you updated Chrome to Version 32.0.1700.102m? I have had a few issues with select boxes in an earlier version of v32 which got fixed when I updated to the latest version, the scrollbars inside the select weren't working properly. This could be related.

Update

I managed to reproduce the behaviour on the second select in this fiddle by setting word-break: break-word; on it. You should make sure that it is not set on the select or on one of its parents.

Upvotes: 1

Related Questions