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


the weirdest problem: <select> elements wrap text next line if width set 2em (smaller contents, not much). in chrome! firefox , ie 9 work fine.

enter image description here

both dropdowns have 2 options: - , stripe. if stripe option selected (even during runtime!!) element wraps that.

opening works , should: options overflow required width:

enter image description here

the simple version relevant css: jsfiddle (the fiddle isn't broken me)

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

and html (but without white space):

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

(that's applicable css!) <select> inside <div> floats left, fiddle works same that's not it. i've disabled css , nothing helped, removing width: 2em works.

in case problem isn't clear: don't want that. should behave in ff , ie: tiny until open it.

have updated chrome version 32.0.1700.102m? have had few issues select boxes in earlier version of v32 got fixed when updated latest version, scrollbars inside select weren't working properly. related.

update

i managed reproduce behaviour on second select in fiddle setting word-break: break-word; on it. should make sure not set on select or on 1 of parents.


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -