title: change the width of the <p:selectOneMenu>
body: <p>I have a slectOnMenu component I am trying to Change the width of slectOnMenu by setting the <code>width:120% !important;</code> in the style after overridering <code>.ui-selectonemenu, ui-selectonemenu-</code> but I am getting just the Label changed how can I move the trigger too? I want to change the selectOneMenu width like the white area below.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>              &lt;h:form id="rqScannerForm"&gt;
                   &lt;style type="text/css"&gt;
                      .ui-selectonemenu{width: 120% !important;} 
                      .ui-selectonemenu-label{width: 120% !important;}
                   &lt;/style&gt;
                    &lt;p:selectOneMenu  style="width: 120% !important;}" scrollHeight="150" 
                    value="#{viewEventStatusController.eventStatusId}"  disabled="#{!eventStatusController.isEntityEditable}" autoWidth="false" &gt;
                    &lt;f:selectItems value="#{viewEventStatusController.eventStatusList}" var="eventStatus" itemValue="#{eventStatus.id}" itemLabel="#{eventStatus.objectId}" /&gt;
                    &lt;/p:selectOneMenu&gt;
                &lt;/h:form&gt;
  </code></pre>
  
  <p><strong>screenshot</strong>
  <a href="https://i.stack.imgur.com/fITjw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fITjw.png" alt="enter image description here"></a></p>