更改<p:selectOneMenu>的宽度

Question

我有一个slectOnMenu组件，我试图通过在重写.ui-selectonemenu, ui-selectonemenu-之后在样式中设置width:120% !important;来改变.ui-selectonemenu, ui-selectonemenu-的宽度，但是我只是要求更改标签，如何也移动触发器呢？我想改变selectOneMenu的宽度，就像下面的白色区域一样。

CSS

              <h:form id="rqScannerForm">
                 <style type="text/css">
                    .ui-selectonemenu{width: 120% !important;} 
                    .ui-selectonemenu-label{width: 120% !important;}
                 </style>
                  <p:selectOneMenu  style="width: 120% !important;}" scrollHeight="150" 
                  value="#{viewEventStatusController.eventStatusId}"  disabled="#{!eventStatusController.isEntityEditable}" autoWidth="false" >
                  <f:selectItems value="#{viewEventStatusController.eventStatusList}" var="eventStatus" itemValue="#{eventStatus.id}" itemLabel="#{eventStatus.objectId}" />
                  </p:selectOneMenu>
              </h:form>

截图

​

Answer 1

.ui-selectonemenu {
    min-width: 50% !important;
}

请注意，使宽度大于100%可能会搞乱您的布局。我从来没有用过比100%大的！如果你的意思是像素

.ui-selectonemenu {
    min-width: 120px !important;
}

为了更好的响应-保存使用它们而不是px：

.ui-selectonemenu {
    min-width: 8em !important;
}