Primefaces LayoutUnit填充和滾動行爲

我是Primefaces的新手，所以我希望這不是很明顯。Primefaces LayoutUnit填充和滾動行爲

總之，我創建了一個簡單的完整頁面佈局，其中包含一個北欄和一箇中心部分。當我在北部LayoutUnit中放置一個工具欄時，我得到一個滾動條（在Chrome上，而不是在Firefox上），並且我在工具欄後添加了額外的填充。

任何想法如何阻止這兩個問題的發生？

編輯：請參閱下面的更新中...

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head title="Primefaces Test" /> 

<h:body> 
    <p:layout fullPage="true"> 
     <p:layoutUnit position="north"> 
      <h:form> 
       <p:toolbar> 
        <f:facet name="right"> 
         <p:commandButton value="button" /> 
        </f:facet> 
       </p:toolbar> 
      </h:form> 
     </p:layoutUnit> 
     <p:layoutUnit position="center"> 
      <h:outputText value="Hello, world." /> 
     </p:layoutUnit> 
    </p:layout> 
</h:body> 
</html>

...

編輯1：移動工具欄從北方欄刪除滾動條，和刪除表單標籤消除了間隙。麻煩的是，我不能像這樣使用全屏佈局，所以它不是一個解決方案。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head title="Primefaces Test" /> 

<h:body> 
    <p:toolbar> 
     <f:facet name="left"> 
      <p:commandButton type="push" value="button" /> 
     </f:facet> 
     <f:facet name="right"> 
      <p:commandButton type="push" value="button" /> 
     </f:facet> 
    </p:toolbar> 
    <p:layout fullPage="false"> 
     <p:layoutUnit position="center"> 
      <h:outputText value="Hello, world." /> 
     </p:layoutUnit> 
    </p:layout> 
</h:body> 
</html>

外northbar，但表單標籤仍然得到了差距：

無間隙或northbar看起來更好，但不能使用全屏：

來源

2014-07-07 Shane

好吧，所以我通過覆蓋佈局UI（.ui-layout-unit .ui-layout-unit-content）的溢出CSS來修復它。希望這可以幫助某人。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head title="Primefaces Test"> 
    <style> 
     .ui-layout-unit .ui-layout-unit-content { 
      padding: 0.2em 0em; 
      border: 0px none; 
      overflow: hidden !important; 
     } 
    </style> 
</h:head> 

<h:body> 
    <h:form> 
     <p:layout fullPage="true"> 
      <p:layoutUnit position="north"> 
       <p:toolbar> 
        <f:facet name="left"> 
         <p:commandButton type="push" value="button" /> 
        </f:facet> 
        <f:facet name="right"> 
         <p:commandButton type="push" value="button" /> 
        </f:facet> 
       </p:toolbar> 
      </p:layoutUnit> 
      <p:layoutUnit position="center"> 
       <h:outputText value="Hello, world." /> 
      </p:layoutUnit> 
     </p:layout> 
    </h:form> 
</h:body> 
</html>

來源

2014-07-07 11:19:13 Shane

爲了擺脫在北方窗格中的滾動條，並在北方窗格而已，我不得不溢出的CSS屬性設置爲隱藏，北窗格中的內容元素。上面建議的解決方案將刪除所有窗格中的所有滾動條。通常情況下，人們不會希望在內容窗格中使用它。

來源

2016-02-01 15:59:01

我不得不使用，以實現由wieland.gmeiner描述（用mainLU被分配爲我想保留滾動佈局部的id結果如下。

.ui-layout-unit:not(#mainLU) .ui-layout-unit-content { 
     overflow: hidden; 
    }

來源

2017-04-27 19:30:11 JBL

您可以將它添加到他的答案是「編輯」，它使事情保持清潔 – Kukeltje

Primefaces LayoutUnit填充和滾動行爲

回答

相關問題