Datatable - Rows shrink when using filtering

[Zoidberg42]

Primefaces 5.1
JSF 2.1
Tomcat 8.0.17

I have a dashboard that has two datatables. One of the tables has both sorting on all columns and two columns have filtering. I can sort each field without issue, but when I use the filter on either column, while it filters the data, the next time I use a sort, all the rows shrink beyond recognition.


snippet from xhtml:

Code: Select all

	 	<p:panel id="tankHistoricReadingsPanel" widgetVar="tankHistoricReadingsPanel" header="Search Readings (drag me)" style="width: 45%">
		 	<p:panel widgetVar="historySearch" id="historySearch" visible="true" toggleable="true">
				<p:selectCheckboxMenu label="Groups" scrollHeight="150">
                   	<f:selectItems value="#{tankReadingsPage.availableHistoryGroups}" />
                </p:selectCheckboxMenu>
                &#160;
				<p:calendar id="startDateId" widgetVar="startDate" label="Start Date" binding="#{startDate}" value="#{tankReadingsPage.startDate}" pattern="MM/dd/yy" mode="popup" size="6"/>
				<p:calendar id="endDateId" widgetVar="endDate" label="End Date" binding="#{endDate}" value="#{tankReadingsPage.endDate}" pattern="MM/dd/yy" mode="popup" size="6"/>
				<h:commandButton value="Find" id="queryByDateId" widgetVar="queryByDate" actionListener="#{tankReadingsPage.getTankReadingsInRange(startDate.value, endDate.value)}" />
			</p:panel>
		    <p:dataTable id="tankHistoricReadingsTable" widgetVar="tankHistoricReadingsTable" var="reading" value="#{tankReadingsPage.tankReadings}" caption="Historic Tank Readings" resizableColumns="false" 
		    			 scrollable="true" scrollHeight="50%" paginator="true" rows="25"
		                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
		                 rowsPerPageTemplate="25,50,100" lazy="false" sortMode="single">

				<p:column headerText="Id" sortBy="#{reading.tank.tankNumber}" filterBy="#{reading.tank.tankNumber}" filterMatchMode="contains" filterStyle="width: 80%">
			        <h:outputText value="#{reading.tank.tankNumber}" />
			    </p:column>
			    <p:column headerText="Grade" sortBy="#{reading.tank.productGradeCode}" filterBy="#{reading.tank.productGradeCode}" filterMatchMode="contains" filterStyle="width: 80%">
			        <h:outputText value="#{reading.tank.productGradeCode}" />
			    </p:column>
			    <p:column headerText="Time" sortBy="#{reading.readingTime}">
			        <h:outputText styleClass="historicTime" id="historicTime" value="#{reading.readingTime}" >
			        	<f:convertDateTime pattern="MM/dd/yy H:mm" />
			        </h:outputText>
			    </p:column>
			    <p:column headerText="Level" sortBy="#{reading.readingLevel}">
			        <h:outputText value="#{reading.readingLevel}" />
			    </p:column>
			    <p:column headerText="&#8457;" sortBy="#{reading.readingTemperature}">
			        <h:outputText value="#{reading.readingTemperature}" />
			    </p:column>
			    <p:column headerText="Bbl/HR" sortBy="#{reading.flowRate}">
			        <h:outputText value="#{reading.flowRate}" />
			    </p:column>
			</p:dataTable>
		</p:panel>

CSS:

Code: Select all

.pf-dashboard-column {
	border-style:solid;
	border-width:5px;
}

.datatable th div.dataTables_sizing {
    font-size: 10px;
}


.ui-panel-content, .ui-widget-content {
        padding: 0px;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
}

.ui-sortable, {
	padding: 0px;
	margin: 0px;
	width: 50%;
}

.pui-sortable-column  {
	padding: 0px;
	margin: 0px;
	width: 100%;
}

.ui-datatable-scrollable table {
    table-layout: fixed !important;
}
 
.ui-datatable table, .ui-datatable-resizable table {
    table-layout: auto !important;
}

.datatable th {
	font-size: 10px; 
}

.datatable td {
	font-size: 10px; 
}

.dataTables_length { 
	font-size: 10px; 
}

.dataTables_info {
	font-size: 10px; 
}

.dataTables_paginate {
	font-size: 10px; 
}