PrimeFaces Omega 3.1 Panel Grid spacing

Post Reply
erickdeoliveiraleal
Posts: 74
Joined: 25 Mar 2013, 13:00

19 Jun 2021, 01:24

I'm trying to update my project, but I've found that Omega 3.1 adds much more spacing than older one in PanelGrid elements. And it also have more space than Horizontal example in Omega.zip. The page haves much more white spaces
https://ibb.co/TYX7ddC
https://ibb.co/NSFh130
https://ibb.co/ccg1HpW

My panelGrid code looks like this:

Code: Select all

<p:panelGrid columns="4"
							columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4"
							layout="grid" styleClass="ui-panelgrid-blank ui-fluid"
							style="border:0px none; background-color:transparent;"
							id="painelPesquisa">
Last edited by erickdeoliveiraleal on 22 Jun 2021, 16:53, edited 1 time in total.

siris
Posts: 246
Joined: 29 Jul 2019, 13:57

21 Jun 2021, 09:07

Hi,

Omega using new PrimeFlex since version 3.0. Please try with "p-col-2 p-col-4". Your styles may not be working if you changed the old primeflex.css files.

Best Regards,

erickdeoliveiraleal
Posts: 74
Joined: 25 Mar 2013, 13:00

22 Jun 2021, 15:44

siris wrote:
21 Jun 2021, 09:07
Hi,

Omega using new PrimeFlex since version 3.0. Please try with "p-col-2 p-col-4". Your styles may not be working if you changed the old primeflex.css files.

Best Regards,
Hi, with p-col it still consumes a lot of the page with white spaces. I think panelGrid is not enough optimized in this theme. Also it doesn't include an panelGrid example.

If I use the code present in formLayout.xhtml "horizontal sectiom" it is better optimized, panelGrid should follow it, because it would be a lot of work to migrate our code to this new style.

Code: Select all

<h5>Horizontal</h5>
                    <div class="p-field p-grid">
                        <p:outputLabel for="name3" styleClass="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Name</p:outputLabel>
                        <div class="p-col-12 p-md-10">
                            <p:inputText id="name3" />
                        </div>
                    </div>
                    <div class="p-field p-grid">
                        <p:outputLabel for="email3" styleClass="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Email</p:outputLabel>
                        <div class="p-col-12 p-md-10">
                            <p:inputText id="email3" />
                        </div>
                    </div>
can you share a panelGrid example with reduced white space between inputs?

siris
Posts: 246
Joined: 29 Jul 2019, 13:57

23 Jun 2021, 10:25

Hi,

With Primeflex, the padding can change according to the themes. We use 1rem in some themes and .5rem in others. But Omega already uses .5rem. So Omega already have lower padding. Make sure you import and use the primeflex.min.css file inside Omega. Other than that, panelgrid is obsolete. We now recommend using primeflex.

Best Regards,

Post Reply

Return to “Omega - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests