Css JSF页面对话框中按钮的固定位置
我正在使用PrimeFaces对话框。我这里只有一些元素。一个数据表和两个按钮(确定和取消)。 但按钮显示在底部,只有在向下滚动整个表格时才可见。我希望它们总是显示在底部,无论我在第一行还是最后一行。 我搜索了很多,但没有找到任何有效的。 以下是我的代码片段:Css JSF页面对话框中按钮的固定位置,css,jsf,primefaces,dialog,Css,Jsf,Primefaces,Dialog,我正在使用PrimeFaces对话框。我这里只有一些元素。一个数据表和两个按钮(确定和取消)。 但按钮显示在底部,只有在向下滚动整个表格时才可见。我希望它们总是显示在底部,无论我在第一行还是最后一行。 我搜索了很多,但没有找到任何有效的。 以下是我的代码片段: <f:facet name="{SelectPrijemca}"> <div class="Fs14 Absolute" style="right: 11px; t
<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可滚动,因为我在另一个dataTable的paginatorTemplate中使用了这个方面,它以某种方式使这个表所在的所有页面都可滚动
我在包装panelGrid时发现了一个部分解决方案,其中按钮是:
<div style="position: fixed; width: 65%; top: 70%; left: 16%></div>
尝试将数据表放在outputPanel中,并使用
<p:outputPanel id="opScrl" style="height:560px;overflow:auto">
<p:dataTable ...>
</p:dataTable>
</p:outputPanel>
It work:))我尝试了很多东西,花了很多时间让它自己工作,但都没有成功。你在几分钟内就帮了我。非常感谢:)很高兴我能帮你解决这个问题:)