To adjust primefaces datatable size,live scrolling with screen size

[Raghu Sundar]

Hi,I have a datatable with live scrolling feature.The table fits fine in my development machine but the user of this app has larger screen.It would be good if the datatable fits according to the screen size.Also the height of the datatable should get adjusted with more number of rows for live scroll.Currently i have 15 rows for live scrolling.It would be good if the scroll rows increases with the height of the screen.Please help me in this regard.

<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 of the entire page

    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;
}

[K. Tsang]

For the width of the datatable, your CSS already specifying 100%. However, if it isn't fit the entire width then you need to add the "important!" at the end to override the primefaces internal CSS.

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper  
    {  
    overflow: auto;  
    width: 100% important!;  
    height: 100% padding-bottom:    5px;  
}  
  
.datatable {  
    padding-left: 15px;  
    padding-right: 15px;  
}  

As for the number of rows I think you will need to calculate this value given the screen's height. Now the screen height can get from Javascript but once you do, assigning this value back to the datatable may be a bit tricky.

[Raghu Sundar]

Thanks Tsang.The width problem is resolved.I need to try how to achive the correct height.

[Tim Holloway]

Actually, while I haven't done styling in PrimeFaces, I think that the styleClass can be used on your dataTable so that you can set the height of the entire control to say, 85% of the displayed page. Of course, I'm also not recently practiced even in vanilla HTML height control via CSS and I suspect it may be obstinate. It's usually easier to command width than height, since a web page can theoretically be infinitely long.