p：panelGridを使用して個人用配信を作成するにはどうすればよいですか？

JSF 2.2でWeb Javaアプリケーションを開発しています。およびPrimeFaces 6.0特定のサイズのを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>

ページこのように：私はの41.666パーセントを持っているでしょうC、F、EとHのp:column -sを希望

p:column -sのDおよびGは、16.666％のwithを有し、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を使用して個人用配信を作成するにはどうすればよいですか？

答えて

関連する問題