Error displaying selecton elements in p panelgrid

Question

I have this problem:

here is the code:

<p:panelGrid styleClass="newArticlePanelGrid" > <!-- __________________________________________row1________________________________________________ --> <p:row> <p:column> <h:outputLabel value="Designation : " /> </p:column> <p:column colspan="3" > <p:inputText id="new-article-designation" style="width: 449px;" value="#{articlesMB.article.designation}" required="true" requiredMessage="designation requise" /> </p:column> </p:row> <p:row> <p:column /> <p:column colspan="3" > <p:message id="for-new-article-designation" for="new-article-designation" display="text" /> </p:column> </p:row> <!-- __________________________________________row2________________________________________________ --> <p:row> <p:column> <h:outputLabel value="Type : " /> </p:column> <p:column> <p:selectOneMenu id="new-article-typeggg" required="true" requiredMessage="type requis" converter="#{typeConverter}" style="width:100%" value="#{articlesMB.article.type}"> <!-- <f:selectItem itemLabel="Selectionner Type" itemValue="" />--> <f:selectItems value="#{articlesMB.listTypes}" var="v" itemLabel="#{v.libelle}" itemValue="#{v}" /> </p:selectOneMenu> </p:column> <p:column> <h:outputLabel value="Unité : " /> </p:column> <p:column> <p:selectOneMenu id="new-article-unite" required="true" widgetVar="uniteselect" requiredMessage="unité requise" converter="#{uniteConverter}" style="width:100%" value="#{articlesMB.article.unite}"> <!-- <f:selectItem itemLabel="Selectionner Unite" itemValue="" /> --> <f:selectItems value="#{articlesMB.listUnites}" var="v" itemLabel="#{v.libelle}" itemValue="#{v}" /> </p:selectOneMenu> </p:column> </p:row> <p:row> <p:column /> <p:column> 

I do not know what to do to solve this problem: I tested width:100% , but as you can see, it does not change

how can i solve this?

early

Answer 1

The problem arises from style="100%" , it only changes the width of selectonemenu, you must set the width for the label inside selectonemenu (in this situation):

  <style type="text/css"> .ui-selectonemenu-label{ width:100% !important; } </style> 

If you want to install all selectonemenu:

  <style type="text/css"> .ui-selectonemenu-label{ width:100% !important; } .ui-selectonemenu{ width:100% !important; } </style> 

for more general, you can include in the css file.

See also: What is a JSF Resource Library and How to Use It?