mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(paginator): icons and labels not centered vertically on IE (#12495)
Fixes the text and icons inside the paginator not being centered vertically on IE11. Fixes #12491.
This commit is contained in:
Kristiyan Kostadinov
committed by
vivian-hu
vivian-hu
parent
4d4ee182de
commit
fe3f37ac6f
@@ -1,80 +1,82 @@
|
||||
<div class="mat-paginator-container">
|
||||
<div class="mat-paginator-page-size" *ngIf="!hidePageSize">
|
||||
<div class="mat-paginator-page-size-label">
|
||||
{{_intl.itemsPerPageLabel}}
|
||||
<div class="mat-paginator-outer-container">
|
||||
<div class="mat-paginator-container">
|
||||
<div class="mat-paginator-page-size" *ngIf="!hidePageSize">
|
||||
<div class="mat-paginator-page-size-label">
|
||||
{{_intl.itemsPerPageLabel}}
|
||||
</div>
|
||||
|
||||
<mat-form-field
|
||||
*ngIf="_displayedPageSizeOptions.length > 1"
|
||||
[color]="color"
|
||||
class="mat-paginator-page-size-select">
|
||||
<mat-select
|
||||
[value]="pageSize"
|
||||
[aria-label]="_intl.itemsPerPageLabel"
|
||||
(selectionChange)="_changePageSize($event.value)">
|
||||
<mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
|
||||
{{pageSizeOption}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field
|
||||
*ngIf="_displayedPageSizeOptions.length > 1"
|
||||
[color]="color"
|
||||
class="mat-paginator-page-size-select">
|
||||
<mat-select
|
||||
[value]="pageSize"
|
||||
[aria-label]="_intl.itemsPerPageLabel"
|
||||
(selectionChange)="_changePageSize($event.value)">
|
||||
<mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
|
||||
{{pageSizeOption}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="mat-paginator-range-actions">
|
||||
<div class="mat-paginator-range-label">
|
||||
{{_intl.getRangeLabel(pageIndex, pageSize, length)}}
|
||||
</div>
|
||||
|
||||
<div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-paginator-range-actions">
|
||||
<div class="mat-paginator-range-label">
|
||||
{{_intl.getRangeLabel(pageIndex, pageSize, length)}}
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-first"
|
||||
(click)="firstPage()"
|
||||
[attr.aria-label]="_intl.firstPageLabel"
|
||||
[matTooltip]="_intl.firstPageLabel"
|
||||
[matTooltipDisabled]="!hasPreviousPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasPreviousPage()"
|
||||
*ngIf="showFirstLastButtons">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-previous"
|
||||
(click)="previousPage()"
|
||||
[attr.aria-label]="_intl.previousPageLabel"
|
||||
[matTooltip]="_intl.previousPageLabel"
|
||||
[matTooltipDisabled]="!hasPreviousPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasPreviousPage()">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-next"
|
||||
(click)="nextPage()"
|
||||
[attr.aria-label]="_intl.nextPageLabel"
|
||||
[matTooltip]="_intl.nextPageLabel"
|
||||
[matTooltipDisabled]="!hasNextPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasNextPage()">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-last"
|
||||
(click)="lastPage()"
|
||||
[attr.aria-label]="_intl.lastPageLabel"
|
||||
[matTooltip]="_intl.lastPageLabel"
|
||||
[matTooltipDisabled]="!hasNextPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasNextPage()"
|
||||
*ngIf="showFirstLastButtons">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-first"
|
||||
(click)="firstPage()"
|
||||
[attr.aria-label]="_intl.firstPageLabel"
|
||||
[matTooltip]="_intl.firstPageLabel"
|
||||
[matTooltipDisabled]="!hasPreviousPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasPreviousPage()"
|
||||
*ngIf="showFirstLastButtons">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-previous"
|
||||
(click)="previousPage()"
|
||||
[attr.aria-label]="_intl.previousPageLabel"
|
||||
[matTooltip]="_intl.previousPageLabel"
|
||||
[matTooltipDisabled]="!hasPreviousPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasPreviousPage()">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-next"
|
||||
(click)="nextPage()"
|
||||
[attr.aria-label]="_intl.nextPageLabel"
|
||||
[matTooltip]="_intl.nextPageLabel"
|
||||
[matTooltipDisabled]="!hasNextPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasNextPage()">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button mat-icon-button type="button"
|
||||
class="mat-paginator-navigation-last"
|
||||
(click)="lastPage()"
|
||||
[attr.aria-label]="_intl.lastPageLabel"
|
||||
[matTooltip]="_intl.lastPageLabel"
|
||||
[matTooltipDisabled]="!hasNextPage()"
|
||||
[matTooltipPosition]="'above'"
|
||||
[disabled]="!hasNextPage()"
|
||||
*ngIf="showFirstLastButtons">
|
||||
<svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
|
||||
<path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ $mat-paginator-selector-trigger-fill-width: 64px;
|
||||
/** @deprecated Use `$mat-paginator-selector-trigger-width` instead. @breaking-change 8.0.0 */
|
||||
$mat-paginator-selector-trigger-min-width: $mat-paginator-selector-trigger-width;
|
||||
|
||||
/** @deprecated Unused. To be removed */
|
||||
$mat-paginator-range-actions-min-height: 48px;
|
||||
|
||||
$mat-paginator-range-label-margin: 0 32px 0 24px;
|
||||
@@ -37,6 +38,12 @@ $mat-paginator-button-last-increment-icon-margin: 9px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Note: this wrapper element is only used to get the flexbox vertical centering to work
|
||||
// with the `min-height` on IE11. It can be removed if we drop support for IE.
|
||||
.mat-paginator-outer-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mat-paginator-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -44,6 +51,7 @@ $mat-paginator-button-last-increment-icon-margin: 9px;
|
||||
min-height: $mat-paginator-height;
|
||||
padding: $mat-paginator-padding;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-paginator-page-size {
|
||||
@@ -81,7 +89,6 @@ $mat-paginator-button-last-increment-icon-margin: 9px;
|
||||
.mat-paginator-range-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: $mat-paginator-range-actions-min-height;
|
||||
}
|
||||
|
||||
.mat-paginator-icon {
|
||||
|
||||
Reference in New Issue
Block a user