Example for panelgrid with 2 columns?

Locked
User avatar
bjorntj
Posts: 277
Joined: 30 Jul 2010, 10:46

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
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

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>

User avatar
bjorntj
Posts: 277
Joined: 30 Jul 2010, 10:46

01 Feb 2016, 14:27

Ok, will try that... Thx... :)
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

01 Feb 2016, 14:31

You're welcome ;)

Locked

Return to “Titan”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests