PrimeFaces Omega 3.1 Panel Grid spacing

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
erickdeoliveiraleal
Posts: 79
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: 322
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: 79
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: 322
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,

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

26 Nov 2021, 00:48

hello, i checked files inside primefaces omega 3.1.0 and it shows it is using 1rem instead of 0.5rem in panel grid spacing. please, could you fix it for next version?
also in primefaces store is showing two 3.1.0 files for download.

Code: Select all

//panel common
$panelHeaderBorder:1px solid $shade300 !default;
$panelHeaderBg:$shade100 !default;
$panelHeaderTextColor:$shade700 !default;
$panelHeaderFontWeight:700 !default;
$panelHeaderPadding:1rem !default;
$panelContentBorder:1px solid $shade300 !default;
$panelContentBg:$shade000 !default;
$panelContentTextColor:$shade700 !default;
$panelContentPadding:1rem !default;
$panelFooterBorder:1px solid $shade300 !default;
$panelFooterBg:$shade000 !default;
$panelFooterTextColor:$shade700 !default;
$panelFooterPadding:1rem !default;

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

24 Dec 2021, 15:23

Hi,

I couldn't replicate this issue. You can use your attached variables in overrides/_theme_variables.scss. Then, please provide the new theme files using sass command.

Best Regards,

Post Reply

Return to “Omega - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests