ändere die Breite des <p: selectOneMenu>

Question

Ich habe eine slectOnMenu Komponente Ich versuche, die Breite von slectOnMenu zu ändern, indem ich die width:120% !important; im Stil nach der Außerkraftsetzung .ui-selectonemenu, ui-selectonemenu- setze, aber ich bekomme nur das Etikett geändert, wie kann ich verschieben auslösen? Ich möchte die selectOneMenu Breite wie den weißen Bereich darunter ändern.

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> 

Screenshot

Answer 1

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

Seien Sie sich bewusst sein, dass macht eine Breite größer als 100% kann mess up Ihr ​​Layout. Ich habe noch nie ein größeres als 100% benutzt! Wenn Sie Pixel

verwenden gemeint

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

Um reaktions-save em statt px verwenden:

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