Primefaces可滾動佈局

是否有可能使Primefaces佈局可滾動？我不想讓我的layoutUnits可滾動，因爲我真的不想在頁面上有多個可滾動的元素。我希望內容面板根據內容調整大小，以便用戶可以線性查看數據。我目前使用一整頁primefaces佈局：Primefaces可滾動佈局

<p:layout fullPage="true">

如果這個心不是那麼可能什麼是我最好的選擇，因爲我很喜歡primefaces部件，但可以生活在沒有它的佈局特點。

乾杯

來源

2011-09-01 Ally

據我可以告訴它不能做！我傾銷primefaces佈局，並與通用的網頁佈局...

來源

2011-09-15 14:55:17 Ally

我不相信，你想在這裏做什麼佈局是正確的。這對於在單個頁面上啓用模板很有用。然而，您也許可以將iframe置於layoutUnit之內以模擬相同的效果，儘管我從未嘗試過這種方法，並且無法告訴您它是否可行。

來源

2011-09-02 11:47:37

您可以創建一個layoutUnit爲中心，然後提供一個樣式類，在您的CSS您可以提供沿着x和y位置滾動。

<p:layoutUnit position="center"> 
    <div id="myScreen" class="right col scroll-x scroll-y"> 
     <ui:insert name="content">My Screen Content Goes Here</ui:insert> 
    </div> 
</p:layoutUnit>

而且在cc文件 -

.col { 
top: 0; bottom: 0; 
} 

.scroll-x { 
overflow-x: auto; 
} 

.scroll-y { 
overflow-y: auto; 
}

希望這會有所幫助。

來源

2012-11-20 06:59:15

只需將所有內容放在<p:layoutunit>內部的<p:scrollPanel>組件中，即可使用（現在是2015年，我們處於Primefaces v5.1.x！版本中）。確保您添加絕對位置和高度，以將<p:scrollPanel>拉伸至<p:layoutunit>的內部 - 請參閱下文。

http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml

<p:scrollPanel mode="native" style="position: absolute; height: 100%;"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    </p> 
    <p> 
     Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus. 
    </p> 
    <p> 
     Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci. 
    </p> 
    <p> 
     Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat. 
    </p> 
    <p> 
     Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat. 
    </p> 
</p:scrollPanel>

來源

2015-04-19 12:01:38 fuzzyanalysis

這是我的答案。 primafeces 6.1。只爲我添加width：100％的scrollPanel樣式 – pillesoft

Primefaces可滾動佈局

回答

相關問題