改变 <p:selectOneMenu> 的宽度

Question

我有一个 slectOnMenu 组件我试图通过在覆盖 .ui-selectonemenu, ui-selectonemenu- 后设置样式中的 width:120% !important; 来更改 slectOnMenu 的宽度，但我只是更改了标签如何移动触发器呢？我想像下面的白色区域一样更改 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;
}

为了更具响应性-保存使用 em 而不是 px：

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