Primefaces 패널 내의 스크롤 가능 영역

Primefaces 전체 페이지 레이아웃을 사용하며 스크롤 가능한 내용 (및 고정 헤더)이있는 패널 (p:panel)을 센터 장치에 삽입하려고하지만 작동하지 않습니다. 나는 시도했다 :Primefaces 패널 내의 스크롤 가능 영역

는 일이 솔루션의 스크롤 p:outputPanel

없음의 내용을 삽입합니다 p:scrollPanel

의 내용을 삽입 스크롤 패널

의 내용을. 중대한 문제는 중앙 유닛의 내용이 "나머지 크기"를 모두 가져야하므로 고정 된 높이/너비를 설정할 수 없다는 것입니다. 누군가 나에게 힌트를 줄 수 있니?

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:xyrion="http://www.rohag.ch/xyrion/jsf" 
     xmlns:p="http://primefaces.org/ui"> 
<h:head> 

    <h:outputStylesheet library="css" name="test.css"/> 

</h:head> 
<h:body> 


    <p:layout fullPage="true"> 

     <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true"> 
      <h:outputText value="North unit content."/> 
     </p:layoutUnit> 

     <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true"> 
      <h:outputText value="South unit content."/> 
     </p:layoutUnit> 

     <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true"> 

     </p:layoutUnit> 

     <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" 
         effect="drop"> 
      <h:outputText value="Right unit content."/> 
     </p:layoutUnit> 


     <p:layoutUnit position="center"> 

      <p:panel header="Title" toggleable="false" closable="false"> 

       <p:outputPanel style="display:block; width:calc(100% - 20px); height:calc(100% - 20px); overflow: auto"> 

        <table style="width:1000px"> 
         <tbody> 
         <tr> 
          <th>Firstname</th> 
          <th>Lastname</th> 
          <th>Age</th> 
         </tr> 
         <tr> 
          <td>Jill</td> 
          <td>Smith</td> 
          <td>50</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 
         <tr> 
          <td>Eve</td> 
          <td>Jackson</td> 
          <td>94</td> 
         </tr> 


         </tbody> 
        </table> 
       </p:outputPanel> 
      </p:panel> 


     </p:layoutUnit> 

    </p:layout> 


</h:body> 
</html>

나는 개인적으로 "UI 레이아웃"템플릿을 좋아하지 않아

.ui-layout-center .ui-layout-unit-content { 
         overflow:hidden !important; 
        }

출처

2016-10-06 Zardo

layout.css. 템플릿은 사용자 정의 CSS (Grid CSS 및 XHTML)를 사용하여 더 잘 제어 할 수 있습니다.

문제를 들어 내가 이런 짓을 했을까 :

이 100 %로 panel 구성 요소 높이가 (당신이 ui-layout-unit-content 그에게 상대가 될 것입니다 계산 된 높이와 패널 높이가 있음을 볼 수 있습니다) 세트 효과 :

#your-panel-id.ui-panel { height: 100% }
설정을 100 %로 panel 콘텐츠 신장

#your-outputPanel-id { height: calc(100% - someSpecificHeight); overflow: auto; }

참고 :

#your-panel-id .ui-panel-content { height: 100% }

이 outputPanel 높이와 오버 플로우 설정 "someSpecificHeight을"- 응용 프로그램 CSS를 기준으로합니다. 나는 내 (Modena 템플릿을 사용한다.) 테스트를했고 스크롤 할 때 모든 테이블 요소를 볼 수 있도록 50px보다 컸다.

희망은 당신을 위해 일합니다! :)

출처

2016-10-10 14:47:35

나는 감동한다, 일한다, thx 대단히! 나는 그리드 CSS – Zardo

도 봐 주셔서 감사합니다. :) –

Primefaces 패널 내의 스크롤 가능 영역

답변

관련 문제