Change rich:select 's width

    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!