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.
both dropdowns have 2 options: -
, stripe
. if stripe
option selected (even during runtime!!) element wraps that.
opening works , should: options overflow required width:
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
Post a Comment