How can I create my personal distribution with p:panelGrid?
Question
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:
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!
1 answers
solution1
1 2017-01-13 08:42:27
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.