white-space:normal CSS not being applied in FireFox
I have some CSS as below that is not getting applied in FireFox. In other browsers like Chrome, Opera and Edge it's getting applied without any issues. You can see a simple demo of this issue at following jsfidle: https://jsfiddle.net/sun21170/hw1zrbzm/3/
select option {
white-space: normal !important; }
My Firefox browser version is 57.0.1 (64-bit).
This makes one think that CSS does not work in FireFox like it's supposed to. The above CSS is always getting overriden by FireFox to white-space : nowrap.
I had also posted the issue in detail on stackoverflow at https://stackoverflow.com/questions/47621342/select-option-white-space-css-not-being-applied-in-firefox, but still waiting for satisfactory answer.
All Replies (7)
If you clean up your code as per the W3C ir will display in a 100 browsers and Google will rank it higher. Your CSS errors https://jigsaw.w3.org/css-validator/validator?uri=+https%3A%2F%2Fjsfiddle.net%2Fsun21170%2Fhw1zrbzm%2F3%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
HTML Errors https://validator.w3.org/nu/?doc=https%3A%2F%2Fjsfiddle.net%2Fsun21170%2Fhw1zrbzm%2F3%2F
Please let us know if this solved your issue or if need further assistance.
Thanks for your response, but there was nothing in there that helps me. My jsfiddle is very simple and straightforward with one select element and a single CSS rule. The html being used is as below and is used with CSS style mentioned in the first post. There is nothing else in the page like other CSs files or script files being used.
<select size="6" name="ListBox1" id="ListBox1" style="width:100px;"> <option value="Item 1 dsdds sdsdsdsd sdsd sdsd sds xyz" title="Item 1 dsdds sdsdsdsd sdsd sdsd sds xyz">Item 1 dsdds sdsdsdsd sdsd sdsd sds xyz</option> <option value="Item 2" title="Item 2">Item 2</option> <option value="Item 3 gfgf kgkgkg kgkkg abc" title="Item 3 gfgf kgkgkg kgkkg abc">Item 3 gfgf kgkgkg kgkkg abc</option> <option value="Item 4" title="Item 4">Item 4</option> <option value="Item 5" title="Item 5">Item 5</option> <option value="Item 6" title="Item 6">Item 6</option> </select>
Modified by cor-el
For what it's worth, IE11 also does not "wrap" the options.
Did it work before Firefox 48? Since Firefox became a multiprocess application, many style rules previously honored for option elements are ignored because they are not passed from the child (content) process to the parent (browser) process where some form controls are drawn. Although a small number of properties and values have been re-enabled, some others probably won't be. I have no idea about this one; it seems like an edge case to want to do this and I don't know if anyone has filed a bug for it.
No, I never tried this in an older version of FireFox., since this is something I ran into a few days ago.
You can try out the simple page that reproduces this problem at Simple Page for this problem
My question is: why do you want to display such long text in such a narrow control that provides so little formatting flexibility?
jscher2000,
Thanks for pointing me to Bugzilla for bug reporting.
I have logged this as an issue in Bugzilla that you can see at Bug Logged
jscher2000 said
My question is: why do you want to display such long text in such a narrow control that provides so little formatting flexibility?
jscher2000,
This was a simple case taken from a complex page that I was working on.
In the real page that I was working on, each listbox was having a width of 150px wide, which worked in 99.9% of situations except in some edge cases where the text was very long. Also, as per design requirements I was not allowed to increase the listbox width.
Modified by sun21170