[英]Primefaces: How to scroll content in a tabView using p:sticky
When a user scrolls down I would like to keep my tabView at the top of the view and scroll the content within the tab.当用户向下滚动时,我希望将 tabView 保留在视图顶部并滚动选项卡内的内容。 I was hoping to achieve this with p:sticky but, instead, the body appears to scroll in back of the tab content, not the tab content.
我希望用 p:sticky 来实现这一点,但相反,正文似乎滚动到选项卡内容的后面,而不是选项卡内容。 I've tried putting the content inside a scrollPanel but that needs a height.
我试过将内容放在 scrollPanel 中,但这需要一个高度。 I've tried some other css solutions but none have worked.
我尝试了一些其他的 css 解决方案,但没有一个奏效。
This is a very abbreviated example.这是一个非常简短的例子。 Note that the tab content does not scroll.
请注意,选项卡内容不会滚动。 Thanks for any solutions.
感谢您提供任何解决方案。
<?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://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</h:head>
<h:body style="width: 1430px;padding:0">
<p:panelGrid style="height: 100px">
<p:outputLabel value="header info"/>
</p:panelGrid>
<p:tabView id="tabViewId">
<p:tab id="tab1Id" title="Tab1">
<h:form>
<!-- <p:scrollPanel mode="native" style="height: 500px;">-->
<p:panelGrid style="height: 1000px">
<p:outputLabel value="here i am"/>
</p:panelGrid>
<p:outputLabel value="scroll to me"/>
<!-- </p:scrollPanel>-->
</h:form>
</p:tab>
</p:tabView>
<p:sticky target="tabViewId"/>
</h:body>
</html>
Hoping to understand all your requirements, here's my suggestion.希望了解您的所有要求,这是我的建议。
Basic idea : adding sticky position style to Prime Faces tab view header (added some border to understand the behavior)基本思想:向 Prime Faces 选项卡视图标题添加粘性位置样式(添加一些边框以了解行为)
<h:body style="width: 99%;padding:0">
<style type="text/css">
.ui-tabs-nav.ui-widget-header {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 10px;
border: 1px solid green;
}
</style>
<p:panelGrid style="height: 100px; border: 2px solid; width: 99%">
<p:outputLabel value="Header info" />
</p:panelGrid>
<p:tabView id="tabViewId"
style="width: calc(99% - 4px); border: 2px solid red;">
<p:tab id="tab1Id" title="Tab1">
<h:form>
<p:panelGrid style="height: 1000px">
<p:outputLabel value="here i am" />
</p:panelGrid>
<p:outputLabel value="scroll to me" />
</h:form>
</p:tab>
</p:tabView>
</h:body>
Check also this , for browser compatibility of the solution.另请检查此解决方案的浏览器兼容性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.