Footer

Post Reply
hugo.zuim
Posts: 3
Joined: 18 Jun 2015, 14:43

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

merve7
Posts: 499
Joined: 12 Sep 2017, 10:44

08 Apr 2019, 10:15

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?

Post Reply

Return to “Manhattan - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests