PrimeFlex not applied on PrimeFaces

Question

I tried to setup PrimeFlex (3.0.1) for PrimeFaces (10.0.0). I used css files as provided in dist folder of PrimeFlex repo. Also I followed the instructions given in PrimeFaces ShowCase and used a couple of flexbox options for a first test drive (as given in FlexBox showcase.

As a result, I retrieve a page that seems not to apply any of the PrimeFlex classes. But why?

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>PrimeFlex in Action</title>
        <h:outputStylesheet name="css/primeflex.css" />
    </h:head>
    <h:body>
        Hello from PrimeFlex

        <h2>Direction</h2>
        <div class="p-d-flex p-flex-column p-flex-md-row">
            <div class="p-mb-2 p-mr-2">Item 1</div>
            <div class="p-mb-2 p-mr-2">Item 2</div>
            <div class="p-mb-2 p-mr-2">Item 3</div>
        </div>

        <h2>Flex Container</h2>
        <div class="p-d-flex">Flex Container</div>
        <div class="p-d-inline-flex">Inline Flex Container</div>

        <h2>Responsive</h2>
        Row direction for larger screens and column for smaller.

        <div class="p-d-flex p-flex-column p-flex-md-row card">
            <div class="p-mb-2 p-mr-2">Item 1</div>
            <div class="p-mb-2 p-mr-2">Item 2</div>
            <div class="p-mb-2 p-mr-2">Item 3</div>
        </div>
    </h:body>
</html>

The css file seems to be retrieved (looking at files shown in network section of Chrome developer tools) but then it is somehow not found/processed for my webapp.

Also, I added FLEX activation into web.xml without any effect:

    <context-param>
        <param-name>primefaces.FLEX</param-name>
        <param-value>true</param-value>
    </context-param>

Also tried using the whole dist folder of PrimeFlex, also does not change a thing. Same with moving the h:outputStylesheet into different positions and sections.

You are using PrimeFlex 2 classes and loaded 3. https://www.primefaces.org/primeflex/migration — Jasper de Vries, Aug 08 '21 at 17:00
Good comment, would like to accept it as correct answer. That exactly was my mistake. Unfortunately I was following provided examples on PrimeFaces ShowCase which did not reference a version of PrimeFlex but linked to it and provided outdated examples. Already started to wonder that I could not find all classes but did not think in version and migration yet. — Greenfly77, Aug 08 '21 at 21:06

Jasper de Vries · Accepted Answer · 2022-05-04T08:31:14.157

PrimeFaces 10, 11 and their showcases are still using PrimeFlex 2. The classes the showcase and documentation are using in examples are those of PrimeFlex 2. The current (August 2021) version of PrimeFlex is 3.

If you look at the PrimeFlex 2 to 3 migration guide, you will notice that most (if not all) of the classes have changed. For example p-text-left became text-left.

I would use PrimeFlex 3 (as migration will be needed at some point anyway) and keep the migration guide at hand when you are replicating examples from the showcase.

Note that PrimeFaces 12 will use PrimeFlex 3 instead of 2. See this issue:

https://github.com/primefaces/primefaces/issues/7598

If you already have an application built using PrimeFlex 2, know that a PrimeFlex 2 to 3 migration tool is available:

https://github.com/primefaces/primefaces/tree/master/primefaces-cli

PrimeFlex not applied on PrimeFaces

1 Answers1