How to create a sticky footer using PrimeFlex (formerly using removed Layout component)

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages
Post Reply
raho
Posts: 27
Joined: 05 Feb 2016, 21:08

31 Aug 2021, 14:06

Hello Community,

I am migrating from Primefaces 8.0 to 10.0.0. The migration guide tells that the Layout component is removed with 10.0.0 and pure CSS should be used instead.
Also I have replaced the unsupported Omega theme with Rain (https://www.primefaces.org/layouts/rain).

My old layout looks like this:

Code: Select all

North (=Header)
------------------------------
Center (=Content)
-----------------------------
South (=Footer)
In the footer I show some buttons like Save and Cancel. Using the removed Layout component, these buttons are always visible and the content part was scrollable.

So how can I achieve this using PrimeFlex?

Currently I am using this approach in my template.xhtml:

Code: Select all

<h:body>
  <div class="p-grid p-dir-col">
    <!-- Header -->
    <div class="p-col">
      <div class="card grid-item">
        <ui:insert name="header"/>
      </div>
    </div>
    <!-- Content -->
    <div class="p-col">
      <div class="card grid-item">
        <ui:insert name="content"/>
      </div>
    </div>
    <!-- Footer (with button Save and Cancel - should always be visible) -->
    <div class="p-col">
      <div class="card grid-item">
        <ui:insert name="footer"/>
      </div>
    </div>
  </div>
</h:body>
But this shows the whole content and I must scroll down to see the buttons!

Any hints welcome - Thank you!
PF 12.0.4
WildFly 23.0.2.Final

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

27 Oct 2021, 09:44

Hi,

Maybe, you can use display classes. You can see detail in this link: http://primefaces.org/showcase/primeflex/display.xhtml

Best regards,
Merve Özçifçi

Post Reply

Return to “PrimeFlex”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest