Footer
Posted: 23 Mar 2019, 15:04
Dear all,
The footer does not working well in page with a table. I would like the footer always on the bottom of page regardless the height of the page (auto calculation). The code is:
_______________________________________________________
List Table
_______________________________________________________
<div class="ui-g-12">
<div class="card card-w-title">
<p-table #dt [value]="users" dataKey="email" [(selection)]="selectedUser"
[paginator]="true" [rows]="5" [responsive]="true"
paginatorPosition="both" sortField="email" sortMode="single" selectionMode="single"
[globalFilterFields]="['email','firstName','lastName']">
<ng-template pTemplate="caption">
<div class="ui-helper-clearfix">
<input type="text" pInputText iconPos="left" size="50" placeholder="Filtro Global" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto;float:left">
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="firstName" style="background-color:#BBE3FD"><span class="ui-column-title">Nome</span><p-sortIcon field="firstName"></p-sortIcon></th>
<th pSortableColumn="lastName" style="background-color:#BBE3FD"><span class="ui-column-title">Sobrenome</span><p-sortIcon field="lastName"></p-sortIcon></th>
<th pSortableColumn="email" style="background-color:#BBE3FD"><span class="ui-column-title">Email</span><p-sortIcon field="email"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-user>
<tr>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
_______________________________________________________
AppComponent
_______________________________________________________
<div class="layout-wrapper" [ngClass]="{'layout-horizontal': menuMode === 'horizontal',
'layout-static': menuMode === 'static',
'layout-slim': menuMode === 'slim',
'layout-slim-active': slimMenuActive && menuMode === 'slim',
'layout-slim-anchored': slimMenuAnchor,
'layout-slim-restore': (menuMode !== 'slim' && slimMenuAnchor),
'layout-toggle': menuMode === 'toggle',
'layout-toggle-active': toggleMenuActive,
'layout-overlay': menuMode === 'overlay',
'layout-overlay-active': overlayMenuActive,
'layout-light': lightMenu === true,
'layout-mobile-active': staticMenuMobileActive,
'layout-static-inactive': staticMenuDesktopInactive}" (click)="onLayoutClick()">
<div class="layout-main">
<app-topbar *ngIf="showTemplate"></app-topbar>
<div class="layout-content">
<router-outlet></router-outlet>
</div>
<app-footer *ngIf="showTemplate"></app-footer>
<div class="layout-main-mask" *ngIf="showTemplate"></div>
</div>
<app-rightpanel *ngIf="showTemplate"></app-rightpanel>
<app-menu [reset]="resetMenu" *ngIf="showTemplate"></app-menu>
</div>
Thanks all,
Hugo
The footer does not working well in page with a table. I would like the footer always on the bottom of page regardless the height of the page (auto calculation). The code is:
_______________________________________________________
List Table
_______________________________________________________
<div class="ui-g-12">
<div class="card card-w-title">
<p-table #dt [value]="users" dataKey="email" [(selection)]="selectedUser"
[paginator]="true" [rows]="5" [responsive]="true"
paginatorPosition="both" sortField="email" sortMode="single" selectionMode="single"
[globalFilterFields]="['email','firstName','lastName']">
<ng-template pTemplate="caption">
<div class="ui-helper-clearfix">
<input type="text" pInputText iconPos="left" size="50" placeholder="Filtro Global" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto;float:left">
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="firstName" style="background-color:#BBE3FD"><span class="ui-column-title">Nome</span><p-sortIcon field="firstName"></p-sortIcon></th>
<th pSortableColumn="lastName" style="background-color:#BBE3FD"><span class="ui-column-title">Sobrenome</span><p-sortIcon field="lastName"></p-sortIcon></th>
<th pSortableColumn="email" style="background-color:#BBE3FD"><span class="ui-column-title">Email</span><p-sortIcon field="email"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-user>
<tr>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
_______________________________________________________
AppComponent
_______________________________________________________
<div class="layout-wrapper" [ngClass]="{'layout-horizontal': menuMode === 'horizontal',
'layout-static': menuMode === 'static',
'layout-slim': menuMode === 'slim',
'layout-slim-active': slimMenuActive && menuMode === 'slim',
'layout-slim-anchored': slimMenuAnchor,
'layout-slim-restore': (menuMode !== 'slim' && slimMenuAnchor),
'layout-toggle': menuMode === 'toggle',
'layout-toggle-active': toggleMenuActive,
'layout-overlay': menuMode === 'overlay',
'layout-overlay-active': overlayMenuActive,
'layout-light': lightMenu === true,
'layout-mobile-active': staticMenuMobileActive,
'layout-static-inactive': staticMenuDesktopInactive}" (click)="onLayoutClick()">
<div class="layout-main">
<app-topbar *ngIf="showTemplate"></app-topbar>
<div class="layout-content">
<router-outlet></router-outlet>
</div>
<app-footer *ngIf="showTemplate"></app-footer>
<div class="layout-main-mask" *ngIf="showTemplate"></div>
</div>
<app-rightpanel *ngIf="showTemplate"></app-rightpanel>
<app-menu [reset]="resetMenu" *ngIf="showTemplate"></app-menu>
</div>
Thanks all,
Hugo