Primefaces: Как прокрутить содержимое в tabView с помощью p: sticky - PullRequest
Новая
       87

Primefaces: Как прокрутить содержимое в tabView с помощью p: sticky

0 голосов
/ 25 февраля 2020

Когда пользователь прокручивает страницу вниз, я бы хотел, чтобы мой tabView находился в верхней части представления и прокручивал содержимое на вкладке. Я надеялся добиться этого с помощью p: sticky, но вместо этого тело, по-видимому, прокручивается сзади содержимого вкладки, а не содержимого вкладки. Я пытался поместить содержимое в scrollPanel, но для этого нужна высота. Я пробовал другие css решения, но ни одно не помогло.

Это очень сокращенный пример. Обратите внимание, что содержимое вкладки не прокручивается. Спасибо за любые решения. 

<?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 Ответ

1 голос
/ 25 февраля 2020

В надежде понять все ваши требования, вот мое предложение.

Основа c идея : добавление стиля закрепления позиции в заголовок представления вкладки 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>

Проверьте также this , для совместимости браузера с решением.

...