I suppose there are some people like me, had puzzled with rich:selec's width setting for long time.
I just solved it and share the way with you all.
We don't need to create a class of css, let's just override the existing class of rich:select in a new css file named select.css in resources folder.
input.rf-sel-inp {
width: 100px;
}
.rf-sel-btn-arrow {
width: 15px;
}
Then, let's add this css file to the page on the top of body inner and one line jquery script to change the css style.
<h:body>
<h:outputStylesheet name="select.css" library="css" />
...
<script>
jQuery('.rf-sel-lst-scrl').css('width','115px');
</script>
</h:body>
Run the page, please. Yes, we changed it!
Comments