dataTable colapsses on Filtering

[FIBACos]

Hi!

We bought "Icarus" to test it for our new Project and it looks fine, but...

We have this dataTable:

Code: Select all

<div class="ui-g-12">
					<p:dataTable var="rapport" value="#{beranz.berGesamt}"
						widgetVar="rapportTable"
						emptyMessage="Kein Ergebniss erfüllt die Suchkriterien"
						styleClass="ui-g-12">
						
						<p:column headerText="Jahr" filterBy="#{rapport.jahr}"
							filterMatchMode="contains" styleClass="ui-g-1">
							<h:outputText value="#{rapport.jahr}" />
						</p:column>

						<p:column headerText="Monat" filterBy="#{rapport.monat}"
							filterMatchMode="contains" styleClass="ui-g-1">
							<h:outputText value="#{rapport.monat}" />
						</p:column>

						<p:column headerText="Kundenname" filterMatchMode="contains"
							filterBy="#{rapport.kundenName}" styleClass="ui-g-2">
							<h:outputText value="#{rapport.kundenName}" />
						</p:column>

						<p:column headerText="Projektname" filterMatchMode="contains"
							filterBy="#{rapport.projektName}" styleClass="ui-g-2">
							<h:outputText value="#{rapport.projektName}" />
						</p:column>
						<p:column headerText="Datum" filterBy="#{rapport.genauesDatum}"
							filterMatchMode="contains" styleClass="ui-g-1">
							<h:outputText value="#{rapport.genauesDatum}"
								pattern="dd-MM-yyyy" />
						</p:column>
						<p:column headerText="Beschreibung" styleClass="ui-g-4"
							filterBy="#{rapport.beschreibung}" filterMatchMode="contains">
							<h:outputText value="#{rapport.beschreibung}" />
						</p:column>
						<p:column headerText="Benötigte Zeit" styleClass="ui-g-1"
							filterBy="#{rapport.gesamtZeit}" filterMatchMode="contains">
							<h:outputText value="#{rapport.gesamtZeit}" />
						</p:column>
					</p:dataTable>
				</div>

It looks like this:



But when we enter something that doesnt return any results, the dataTable colapses and looks like this:



Any Help possible or did i miss something?

FIBACos

Primefaces 6
Icarus
Mojarra 2.2
Tommee+

[mert.sincan]

DataTable component doesn't support ui-g-* class. We use ui-g-* to create containers to components or to change the appearance of components in page on mobile/desktop/tablet modes. Please see; http://www.primefaces.org/showcase/ui/panel/grid.xhtml If you want to set width values, please use style="width: ..% / ..px" on columns;

Code: Select all

...
<p:column headerText="Jahr" filterBy="#{rapport.jahr}" filterMatchMode="contains" style="width:16%">
      <h:outputText value="#{rapport.jahr}" />
</p:column>
...

Also, If you want to use width of ui-g-*, please add the following css code;

Code: Select all

<style type="text/css">
   .myTable th[class*="ui-g-"],
   .myTable td[class*="ui-g-"] {
       float: none;
   }
</style>

<p:dataTable var="rapport" value="#{beranz.berGesamt}" widgetVar="rapportTable"
                  emptyMessage="Kein Ergebniss erfüllt die Suchkriterien"
                  styleClass="ui-g-12 myTable">
                  
   <p:column headerText="Jahr" filterBy="#{rapport.jahr}"  filterMatchMode="contains" styleClass="ui-g-1">
          <h:outputText value="#{rapport.jahr}" />
   </p:column>

....

[FIBACos]

Thx aragorn for the fast reply!

I thought that if the columns act like i wrote in the styleClass, they had the right width, they would keep it in case of filtering.

But nonetheless: with the style you provided it works great!

FIBACos

[mert.sincan]

Thanks for the update!