Липкая панель кнопок с использованием XPages Application Layout - PullRequest
Новая
       11

Липкая панель кнопок с использованием XPages Application Layout

0 голосов
/ 20 ноября 2018

У нас есть сложное приложение, которое использует элемент управления макета приложения библиотеки расширений (xe: applicationLayout), и я пытаюсь сделать липкую панель кнопок (для сохранения, редактирования и т. Д.) В среднем фасете, которая остается на месте, когда выпрокрутите страницу, но я не могу заставить ее работать.(Я все еще новичок в этом.)

Элемент управления макета находится на пользовательском элементе управления ccAppLayout.Только Banner включен и использует ссылки Application и Utility, и он настроен на использование bootstrapResponsiveConfiguration (flat).В свою очередь, ccAppLayout находится на XPage, который настроен следующим образом: 

<xp:div xp:key="facetMiddle" styleClass="container-fluid" id="panelData">
    <xc:ccErrorMessage />
    <xc:ccActionBar />
    <xc:ccDetails />
</xp:div>

ccErrorMessage просто содержит элемент управления «Ошибки отображения» и некоторые вычисляемые текстовые поля внутри «строки» начальной загрузки div.ccDetails имеет содержимое внутри div следующим образом: 

<xp:div id="panelContentData" styleClass="panel panel-primary" style="position:relative">
    [...content here...]
</xp:div>

ccActionBar - это то место, где я застрял.Верхний баннер макета правильно остается фиксированным, и панель действий также должна оставаться фиксированной под баннером, в то время как остальное содержимое прокручивается под панелью.Код выглядит следующим образом, и страница выглядит как this , но весь средний аспект (включая полосу) прокручивается.Я пробовал разные значения для data-offset-top, но, похоже, это ни на что не влияет.Я также попытался поместить атрибуты в отдельный div над строкой, но это не помогло.

<xp:div styleClass="row">
    <xp:this.attrs>
        <xp:attr name="data-spy" value="affix" />
        <xp:attr name="data-offset-top" value="1" />
    </xp:this.attrs>

    <xp:div styleClass="col-xs-3 col-sm-3 col-md-3 col-lg-1">
        <xp:button value="Edit" id="Edit" styleClass="btn btn-primary btn-sm" />
    </xp:div>
    <xp:div styleClass="col-xs-3 col-sm-3 col-md-3 col-lg-1">
        <xp:button value="Exit" id="Exit" styleClass="btn btn-primary btn-sm" />
    </xp:div>
</xp:div>

Затем я бросил affix и попытался «свернуть свое», и это выглядит и работает отлично, ЗА ИСКЛЮЧЕНИЕМ, когда я уменьшаю размер экрана.(Это - это , который должен быть отзывчивым.) Панель действий / средняя область вторгается в верхний баннер . 

<xp:div style="position:sticky; top:5.2rem; z-index:1030; width:100%; background-color:white; margin-top:-9px; padding-top:10px; padding-bottom:10px">
    <xp:div styleClass="row"> 
        <xp:div styleClass="col-xs-3 col-sm-3 col-md-3 col-lg-1">
            <xp:button value="Edit" id="Edit" styleClass="btn btn-primary btn-sm">

Любая помощь будет ЦЕННО признательна, так как яя работаю над этим часами и больше не вижу ничего.

...