0

I need to change the width in p:selectonemenu and i'd like to do it in css.

I tried the following, but doesn't work:

<p:selectOneMenu id="aderenteMenu" required="true"
                            requiredMessage="Aderente obbligatorio" styleClass="aderentestyle" 
                            value="#{garaManagedBean.selectedGara.aderente.id}">
      <f:selectItems value="#{garaManagedBean.listaAderenti}" />                    
</p:selectOneMenu>

In css file i have:

.aderentestyle .ui-selectonemenu {
    width: 300px !important;
}

I don't need to set all p:selectonemenu.

Thanks

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
Gaetano Tortora
  • 105
  • 1
  • 5
  • 8

1 Answers1

0

I solved in this way. The css file doesn't need to specify .ui-selectonemenu.

.aderentestyle {
width: 300px !important;
}
Gaetano Tortora
  • 105
  • 1
  • 5
  • 8
  • The `!important` is considered a workaround. Related: http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 Your concrete problem is likely caused because you didn't look at the JSF-generated HTML output while writing CSS. You should have noticed that the both classes end up in the very same HTML element. You should have removed the blank space between the classnames so that the selector is like `.aderentestyle.ui-selectonemenu`. All with all, taking a JSF pause and separately learning basic HTML/CSS wouldn't be a bad idea. – BalusC Aug 09 '13 at 00:46