CODEWITHSUNDEEP
jsfprimefaceshtml-tablepanelgrid
Juan Camacho
Juan Camacho

Reputation: 746

How can I create my personal distribution with p:panelGrid?

I am developing a Web Java Application with JSF 2.2. and PrimeFaces 6.0. I would like to build a p:panelGrid with p:column-s of specific size but, in this moment, all the p:column-s have the same width, How can I define an specific size and responsive?.

This is all my code:

<?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"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>TSPSupport - Principal</title>
    </h:head>
    <h:body>
        <p:panelGrid>
            <f:facet name="header">
                <p:row>
                    <p:column rowspan="1" colspan="12">
                        A
                    </p:column>
                </p:row>
            </f:facet>

            <p:row>
                <p:column rowspan="1" colspan="12">
                    B
                </p:column>
            </p:row>
            <p:row>
                <p:column rowspan="1" colspan="5">
                    C
                </p:column>
                <p:column rowspan="1" colspan="2">
                    D
                </p:column>
                <p:column rowspan="1" colspan="5">
                    E
                </p:column>
            </p:row>
            <p:row>
                <p:column rowspan="1" colspan="5">
                    F
                </p:column>
                <p:column rowspan="1" colspan="2">
                    G
                </p:column>
                <p:column rowspan="1" colspan="5">
                    H
                </p:column>
            </p:row>

        </p:panelGrid>
    </h:body>
</html>

The page like this:

enter image description here

I would like p:column-s of C, F, E and H would have 41.666% of with and p:column-s of D and G would have 16.666% of with, with 100% equals to 12.

Thank you!

Upvotes: 1

Views: 80

Answers (1)

OneOfMany
OneOfMany

Reputation: 86

You have only 3 columns. Defining html attributes just to get "the expected view" isn't the best practice. CSS should be used instead.

Solution:

<style type="text/css">
    .col-12 {
        width: 100%;
    }

    .col-5 {
        width: 41.666%;
    }

    .col-2 {
        width: 16.666%;
    }
</style>

<p:panelGrid styleClass="col-12">
    <f:facet name="header">
        <p:row>
            <p:column colspan="3" styleClass="col-12">
                A
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column colspan="3" styleClass="col-12">
            B
        </p:column>
    </p:row>
    <p:row>
        <p:column styleClass="col-5">
            C
        </p:column>
        <p:column styleClass="col-2">
            D
        </p:column>
        <p:column styleClass="col-5">
            E
        </p:column>
    </p:row>
    <p:row>
        <p:column styleClass="col-5">
            F
        </p:column>
        <p:column styleClass="col-2">
            G
        </p:column>
        <p:column styleClass="col-5">
            H
        </p:column>
    </p:row>
</p:panelGrid>

Upvotes: 1

Related Questions