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
Footer
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi,
In the demo, the footer always on the bottom of the page for example in Empty Page or Components/Data. Did you mean another usage like sticky footer?
Secondly, please, could you add an image for "The footer does not working well in page with a table." ? Also, could you send me showTemplate variable definition and usage in the js file?
In the demo, the footer always on the bottom of the page for example in Empty Page or Components/Data. Did you mean another usage like sticky footer?
Secondly, please, could you add an image for "The footer does not working well in page with a table." ? Also, could you send me showTemplate variable definition and usage in the js file?
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest