переполнение-х 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, для которых вертикальная полоса прокрутки работает нормально, но если я в том числе переполнение-х в CSS для горизонтального полоса прокрутки, его работу в хроме, но не работает в 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>