Переполнение-x CSS не работает с Firefox/IE

Question

У меня есть код ниже

.textareaclasswide{ border:solid 1px #7f9db9; width:460px; height:150px;
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;overflow-x:auto;  
}



</f:verbatim>
<h:selectManyListbox id="availableProducts" value="#{addSubscriptionsBean.selAvailableProducts}" styleClass="textareaclasswide">
<s:selectItems value="#{addSubscriptionsBean.availableProducts}"var="product" itemLabel="#{product.productDisplayName}" itemValue="#{product.productCode}" />
</h:selectManyListbox>
<f:verbatim>

я использую selectManyListbox, для которого вертикальная полоса прокрутки работает нормально, но если я включаю overflow-x в css для горизонтальной полосы прокрутки, она работает в chrome, но не работает в IE/FIREFOX

Пожалуйста помоги

Answer 1

Вам нужно добавить white-space: nowrap; включить горизонтальную прокрутку.

.textareaclasswide{ 
  white-space: nowrap;
  border:solid 1px #7f9db9; 
  width:460px; 
  height:150px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  overflow-x:auto;  
}

<textarea rows="4" class="textareaclasswide"  cols="10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, neque vel posuere pellentesque, dui orci vehicula erat, in dignissim dolor metus et est. Aliquam erat volutpat. Donec iaculis faucibus dictum. Sed faucibus dui vitae euismod gravida. Nullam quis est molestie, imperdiet augue vitae, ultricies lorem. Donec consectetur scelerisque nisi, vel dictum enim volutpat id. In consectetur rutrum tempor. Curabitur volutpat, leo a vestibulum facilisis, sapien lectus lacinia ante, ac volutpat dui nibh sed erat.

Etiam vitae lacus in libero consectetur bibendum. Curabitur tincidunt arcu in massa ultrices imperdiet. Phasellus tristique velit vel auctor egestas. Nulla facilisi. Sed auctor turpis at dui consectetur lacinia ut quis ante. Aliquam non nisl est. Maecenas dapibus lectus at libero egestas, ac semper arcu facilisis. Aliquam auctor ex at erat rutrum, vel suscipit felis eleifend. Mauris lobortis diam quis est malesuada, eget placerat turpis sagittis.
</textarea>