cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs-infra): prevent extra space at the bottom of the page in Chrome (#28864)

Browse Source 
The supposedly visually hidden `mat-icon` creates unnecessary space at
the bottom of the page (below the footer) in recent Chrome versions.
This didn't happen before and it still doesn't happen in other browsers
(Firefox, Edge, IE).

This commit fixes it by wrapping the icon in a visually hidden `div`
container, which doesn't have other styles (such as `mat-icon` does)
that could affect the layout of the page.

Fixes #28858

PR Close #28864
This commit is contained in:
George Kalpakas 2019-02-20 16:14:31 +02:00 committed by Igor Minar
parent 48cabb44c7
commit cfe4732e41
1 changed files with 6 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
aio/src/app/app.component.html
View File

@ -6,11 +6,7 @@
<mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning"> <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
<mat-toolbar-row class="notification-container"> <mat-toolbar-row class="notification-container">
<aio-notification <aio-notification notificationId="survey-february-2019" expirationDate="2019-03-01" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
notificationId="survey-february-2019"
expirationDate="2019-03-01"
[dismissOnContentClick]="true"
(dismissed)="notificationDismissed()">
<a href="http://bit.ly/angular-survey-2019"> <a href="http://bit.ly/angular-survey-2019">
<mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon> <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
<span class="message">Help Angular by taking a <b>1 minute survey</b>!</span> <span class="message">Help Angular by taking a <b>1 minute survey</b>!</span>
@ -54,12 +50,7 @@
<main class="sidenav-content" [id]="pageId" role="main"> <main class="sidenav-content" [id]="pageId" role="main">
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner> <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
<aio-doc-viewer [class.no-animations]="isStarting" <aio-doc-viewer [class.no-animations]="isStarting" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
[doc]="currentDocument"
(docReady)="onDocReady()"
(docRemoved)="onDocRemoved()"
(docInserted)="onDocInserted()"
(docRendered)="onDocRendered()">
</aio-doc-viewer> </aio-doc-viewer>
<aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt> <aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
</main> </main>
@ -71,7 +62,7 @@
</div> </div>
<footer class="no-print"> <footer class="no-print">
<aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer> <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>
</footer> </footer>
<!-- <!--
@ -80,4 +71,6 @@
material icons on other pages are displayed correctly in offline mode. material icons on other pages are displayed correctly in offline mode.
(Note: Instantiate lazily to avoid affecting the initial rendering.) (Note: Instantiate lazily to avoid affecting the initial rendering.)
--> -->
<mat-icon class="cdk-visually-hidden" *ngIf="!isStarting">&nbsp;</mat-icon> <div class="cdk-visually-hidden" *ngIf="!isStarting">
<mat-icon>&nbsp;</mat-icon>
</div>