Prime Community Forum

Posted: **30 Jan 2016, 19:59**

Just wondering if someone can provide an example on the best way to do this, using responsive design and Titan..:

I have a panelgrid with 2 columns, one column for labels and one for inputfields. The column to the right for inputfields is ok as it is but I would want the left column to not be as wide as the right column but to only use the width needed to display the label with the largest lenght. Is this possible? If so, how?

Regards,

BTJ

Posted: **01 Feb 2016, 14:22**

I think you can use Grid Css classes in columnClasses attribute of PanelGrid with layout="grid".
http://www.primefaces.org/showcase/ui/panel/grid.xhtml

Exp;

Code: Select all

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-2, ui-grid-col-10" ...>
      <h:outputLabel value="Name" />                           // added ui-grid-col-2
      <p:inputText />                                          // added ui-grid-col-10  
                                
      <h:outputLabel value="Email" />                           // added ui-grid-col-2
      <p:inputText  />                                         // added ui-grid-col-10
                                
      <h:outputLabel value="Phone" />                         // ...
      <p:inputText  />                                       // ...
</p:panelGrid>

Posted: **01 Feb 2016, 14:27**

Ok, will try that... Thx...

Posted: **01 Feb 2016, 14:31**

You're welcome

Prime Community Forum

Example for panelgrid with 2 columns?

Example for panelgrid with 2 columns?

Re: Example for panelgrid with 2 columns?

Re: Example for panelgrid with 2 columns?

Re: Example for panelgrid with 2 columns?