how to set the width of a selectonemenu in primefaces?

0

I have several combos, and I want them all to look the same size, but as the list that fills them, in some cases it's long, the combo gets longer and looks uneven, as I can set a size for all

<p:fieldset legend="Bien Armonizado" toggleable="true" toggleSpeed="500">
  <p:panelGrid columns="2" columnClasses="ui-grid-col-2,ui-grid-col-3" layout="grid" styleClass="ui-panelgrid-blank">

    <p:outputLabel value="#{sccbienarmonizadomsgs['sccbienarmonizado.cveidcapitulo.title']}:*" />
    <p:selectOneMenu id="cveIdCapitulo" value="#{SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdCapitulo}" filter="true" requiredMessage="#{sccbienarmonizadomsgs['sccbienarmonizado.title']}">
      <f:selectItem itemLabel="Seleccione" />
      <f:selectItems value="#{SccCapituloComponent.listSccCapitulos()}" var="current" itemValue="#{current.cveIdCapitulo}" itemLabel="#{current.desCapitulo}"></f:selectItems>
      <f:ajax execute="cveIdConcepto" event="change" render="cveIdConcepto"></f:ajax>
    </p:selectOneMenu>


    <p:outputLabel value="#{sccbienarmonizadomsgs['sccbienarmonizado.cveidconcepto.title']}:*" />
    <p:selectOneMenu id="cveIdConcepto" value="#{SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdConcepto}" filter="true" requiredMessage="#{sccbienarmonizadomsgs['sccbienarmonizado.title']}">
      <f:selectItem itemLabel="Seleccione" />
      <f:selectItems value="#{SccCapituloComponent.listSccCapituloSccConceptos(SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdCapitulo)}" var="current" itemValue="#{current.cveIdConcepto}" itemLabel="#{current.desConcepto}"></f:selectItems>
      <f:ajax execute="cveIdPartidaGeneral" event="change" render="cveIdPartidaGeneral"></f:ajax>
    </p:selectOneMenu>


    <p:outputLabel value="#{sccbienarmonizadomsgs['sccbienarmonizado.cveidpartidageneral.title']}:*" />
    <p:selectOneMenu id="cveIdPartidaGeneral" value="#{SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdPartidaGeneral}" filter="true" requiredMessage="#{sccbienarmonizadomsgs['sccbienarmonizado.title']}">
      <f:selectItem itemLabel="Seleccione" />
      <f:selectItems value="#{SccConceptoComponent.listSccConceptoSccPartidaGenerals(SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdConcepto, SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdCapitulo)}" var="current"
        itemValue="#{current.cveIdPartidaGeneral}" itemLabel="#{current.desPartidaGeneral}"></f:selectItems>
    </p:selectOneMenu>

                

    
asked by Root93 18.01.2018 в 05:53
source

1 answer

0

Create a style with the desired width:

.ancho200 { width: 200px !important}

Apply the style to your combos:

<p:selectOneMenu id="cveIdCapitulo" value="#{SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdCapitulo}" filter="true" requiredMessage="#{sccbienarmonizadomsgs['sccbienarmonizado.title']}" styleClass="ancho200">
...
<p:selectOneMenu id="cveIdConcepto" value="#{SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdConcepto}" filter="true" requiredMessage="#{sccbienarmonizadomsgs['sccbienarmonizado.title']}" styleClass="ancho200">
...
<p:selectOneMenu id="cveIdPartidaGeneral" value="#{SccBienArmonizadoComponent.sccbienarmonizado.sccPartidaGeneral.cveIdPartidaGeneral}" filter="true" requiredMessage="#{sccbienarmonizadomsgs['sccbienarmonizado.title']}" styleClass="ancho200">

It is not the most elegant.

    
answered by 18.01.2018 в 12:44