我有一个带有实时滚动功能的数据表。该表在我的开发机器上适合,但是应用程序的用户有更大的屏幕。如果数据表能够根据屏幕大小进行调整就好了。此外,数据表的高度应该随着实时滚动的行数增加而调整。目前,我有15行进行实时滚动。如果滚动行数能够随着屏幕高度的增加而增加就好了。请在这方面给我帮助。
我的数据表代码片段:
<h:form id="form">
<div id="content">
<h:selectOneMenu id="workspaceOptions" />
<f:selectItem id="option1" itemLabel="Assignments"
itemValue="assignment" />
</h:selectOneMenu>
<p:dataTable id="workSpaceList" var="data"
value="#{workSpaceBean.lazylpId}" widgetVar="multiSelection"
selection="#{workSpaceBean.selectedRows}" resizableColumns="true"
liveScroll="true" scrollRows="15" scrollWidth="85%"
scrollHeight="69%" styleClass=".ui-datatable-hor-scroll"
tableStyle="table-layout:auto;width:100%;" scrollable="true"
filteredValue="#{workSpaceBean.filteredWorkSpaceItems}">
<p:ajax event="rowSelect" listener="#{workSpaceBean.onRowSelect}"
update=":editWrkSp:display" oncomplete="multiDialog.show()" />
<p:column selectionMode="multiple" style="width:5%" />
.
.
.
<p:column headerText="Insured" filterBy="#{data.insuredName}"
sortBy="#{data.insuredName}" style="width:20%">
<h:outputText value="#{data.insuredName}" />
<!-- style="width:250px" -->
</p:column>
<p:column headerText="City" filterBy="#{data.custAddress_City}"
sortBy="#{data.custAddress_City}">
<h:outputText value="#{data.custAddress_City}" />
</p:column>
</p:dataTable>
</div>
</form>
整个页面的CSS
body {
margin: 0px 0px 0px 0px;
font-family: tahoma;
font-size: 11px;
background-color: #E8F0F8;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#header {
width: 100%;
height: 90px;
background-color: #194775;
position: fixed;
}
#sidepanel {
width: 180px;
height: 100%;
background-color: #D9E6F3;
margin-top: 90px;
position: fixed;
float: left;
border-right-style: solid;
border-width: 0.5px;
border-color: #4A7EBB;
/* z-index:1; */
}
#logo {
float: left;
position: absolute;
left: 5px;
}
#title {
position: absolute;
float: right;
/* padding-right: 10px;
padding-bottom:90px; */
right: 30px;
top: -25px;
/* bottom:10px; */
}
.title1 {
font-family: Agency FB;
font-size: 32px;
color: #7F7F7F;
font-style: bold;
/* float: right; */
text-align: left;
/* padding-right: 10px; */
font-weight: bold;
/* padding-bottom:20px; */
}
.accordionMenu .ui-accordion-header a {
background: #194775;
color: white;
}
.accordionMenu .ui-accordion-content {
/* color:#254061!important */
text-decoration: none;
background-color: #B9CDE5;
font-weight: bold;
padding: 5px 5px;
}
#content {
position: fixed;
margin: 90px 0 0 180px;
width: 100%;
height: 100%;
background-color: #E8F0F8;
}
.label {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #194775;
width: 170px;
/* text-align:left; */
padding: 4px 4px 4px 6px;
text-decoration: none;
margin-top: 1px;
}
.selectMenu {
/* float:right; */
margin-left: 20px;
margin-top: 15px;
}
.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper
{
overflow: auto;
width: 100%;
height: 100% padding-bottom: 5px;
}
.datatable {
padding-left: 15px;
padding-right: 15px;
}
.calendarStyle {
width: 250px;
}
.ui-corner-top {
display: none;
}
.ui-chkbox-box ui-widget ui-corner-all ui-state-default {
/* vertical-align:middle; */
display: none;
}