Как я могу создать свой личный дистрибутив с p: panelGrid?

Я разрабатываю приложение Java Java с JSF 2.2. и PrimeFaces 6.0. Я хотел бы построить p:panelGrid с p:column -s определенного размера, но в этот момент все p:column -s имеют одинаковые width, как я могу определить определенный размер и отзывчивый?Как я могу создать свой личный дистрибутив с p: panelGrid?

Это все мой код:

<?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>

страница как это:

Я хотел бы p:column -s из C, F, E и H бы 41.666% от с и p:column -s от D и G было бы 16.666% с, с 100% равным 1 2.

Спасибо!

источник

2017-01-13 Juan Camacho

У вас есть только 3 колонки. Определение атрибутов html для получения «ожидаемого представления» - не лучшая практика. Вместо этого следует использовать CSS.

Решение:

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

источник

2017-01-13 08:42:27 OneOfMany

Как я могу создать свой личный дистрибутив с p: panelGrid?

ответ

Смежные вопросы