Исправлено положение кнопок в диалоге страницы JSF

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

<f:facet name = "{SelectPrijemca}">
                            <div class = "Fs14 Absolute" style = "right: 11px; top: 4px">
                                <p:outputLabel value = "#{MAService.selectedPrijemca.nazO}" style = "color:white"/>
                                <p:spacer width = "7px"/>
                                <p:commandButton value = "Príjemca" id = "selectPrijemcaButton" icon = "fa fa-user" rendered = "#{MAService.managerAccess}"
                                                 onclick = "PF('PrijemcaDialogWidget').show();" style = "margin-top:2px">
                                </p:commandButton>
                            </div>
                            <p:dialog id = "PrijemcaDialog" header = "Vybrať príjemcu" widgetVar = "PrijemcaDialogWidget" showEffect = "fade" hideEffect = "fade" height = "600" width = "1300" position = "center" modal = "false" resizable = "false" >
                                <h:form id = "prijemcaForm">
                                        <p:dataTable 
                                            id = "prijemcaTable" 
                                            scrollable = "false"
                                            var = "prijemca"
                                            widgetVar = "prijemcaTableWidget" 
                                            value = "#{MAService.prijemcoviaList}"
                                            selectionMode = "single" 
                                            filteredValue = "#{MAService.filteredPrijemcovia}"
                                            emptyMessage = "#{messages.localizeEShop('webclient$datatable.tableEmpty')}"
                                            selection = "#{MAService.selectedPrijemca}"
                                            rowKey = "#{prijemca.id}" >

                                            <p:column width = "50"
                                                filterBy = "#{prijemca.nazO}" filterMatchMode = "contains"
                                                filterStyleClass = "narrowEdit"
                                                headerText = "#{messages.localizeEShop('webclient$subfiles.lo.LOObjWeb.cols.PrijNaz')}"
                                                sortBy = "#{prijemca.nazO}" styleClass = "TexAlLeft"
                                                style = "white-space: nowrap !important;>
                                                <h:outputText value = "#{prijemca.nazO}" styleClass = "TexAlLeft" style = "color: gray"/>
                                            </p:column>
                                            <p:column width = "5"
                                                filterBy = "#{prijemca.ici}" filterMatchMode = "contains"
                                                filterStyleClass = "narrowEdit"
                                                headerText = "#{messages.localizeEShop('webclient$subfiles.lo.LOObjWeb.cols.PrijIci')}"
                                                sortBy = "#{prijemca.ici}" styleClass = "TexAlLeft"
                                                style = "white-space: nowrap !important;>
                                                <h:outputText value = "#{prijemca.ici}" styleClass = "TexAlLeft" style = "color: gray"/>
                                            </p:column>
                                        </p:dataTable>
                                    <p:panelGrid columns = "2">
                                        <p:commandButton value = "OK" icon = "fa fa-check" process = "prijemcaForm" actionListener = "#{MAService.changePrijemca()}" update = "contentForm"/>
                                        <p:commandButton value = "Zrušiť" icon = "fa fa-times" onclick = "PF('PrijemcaDialogWidget').hide()" style = "background-color:red"/>
                                    </p:panelGrid>
                                </h:form>
                            </p:dialog> 

                        </f:facet>    

И только одно замечание, я не могу сделать dataTable прокручиваемым, потому что я использую этот фасет в paginatorTemplate другого dataTable и он каким-то образом делает прокручиваемым всю страницу, где находится эта таблица.

Я нашел одно частичное решение, когда я обернул panelGrid, где кнопки с:

<div style = "position: fixed; width: 65%; top: 70%; left: 16%></div>     

Но это не исправляет кнопки в диалоговом окне, а на всей странице. Поэтому, когда есть способ сделать диалог неподвижным (перетаскиваемым), я мог бы пойти по этому пути.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
790
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте поместить свой datatable в outputPanel и стилизовать его с помощью

<p:outputPanel id = "opScrl" style = "height:560px;overflow:auto">
  <p:dataTable ...>
  </p:dataTable>
</p:outputPanel>

Это работает :))) Я столько всего перепробовал и столько времени потратил на то, чтобы заставить это работать самостоятельно, безуспешно. И ты помог мне за несколько минут. Спасибо большое :)

ironix 03.05.2019 12:25

рада, что смогла помочь с вашей проблемой :)

Raphael_S 03.05.2019 13:31

Другие вопросы по теме