Primefaces: How to scroll content in a tabView using p:sticky
Question
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. 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. I've tried putting the content inside a scrollPanel but that needs a height. I've tried some other css solutions but none have worked.
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>
1 answers
solution1
1 ACCPTED 2020-02-25 20:47:28
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)
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.