jsfprimefacesprimeflex

PrimeFlex not applied on PrimeFaces

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.

Solution

  • 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:

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