fix(paginator): page size selector not working

* Fixes the page size selection stretching to 100% of the paginator. * Fixes the `MdFormFieldModule` not being imported by `md-select`, causing it to look wrong.
angular · Sep 22, 2017 · dc23b90 · dc23b90
1 parent 3571f68
commit dc23b90
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/src/lib/paginator/paginator.html b/src/lib/paginator/paginator.html
@@ -3,11 +3,13 @@
     {{_intl.itemsPerPageLabel}}
   </div>
 
-  <mat-form-field *ngIf="_displayedPageSizeOptions.length > 1">
-    <mat-select class="mat-paginator-page-size-select"
-               [value]="pageSize"
-               [aria-label]="_intl.itemsPerPageLabel"
-               (change)="_changePageSize($event.value)">
+  <mat-form-field
+    *ngIf="_displayedPageSizeOptions.length > 1"
+    class="mat-paginator-page-size-select">
+    <mat-select
+      [value]="pageSize"
+      [aria-label]="_intl.itemsPerPageLabel"
+      (change)="_changePageSize($event.value)">
       <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
         {{pageSizeOption}}
       </mat-option>

diff --git a/src/lib/paginator/paginator.scss b/src/lib/paginator/paginator.scss
@@ -32,13 +32,8 @@ $mat-paginator-button-increment-icon-margin: 16px;
 }
 
 .mat-paginator-page-size-select {
-  // Since the select won't have a placeholder we can remove the space that is reserved for it.
-  padding-top: 0;
   margin: $mat-paginator-selector-margin;
-
-  .mat-select-trigger {
-    min-width: $mat-paginator-selector-trigger-min-width;
-  }
+  width: $mat-paginator-selector-trigger-min-width;
 }
 
 .mat-paginator-range-label {

diff --git a/src/lib/select/select-module.ts b/src/lib/select/select-module.ts
@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {MdSelect, MdSelectTrigger, MD_SELECT_SCROLL_STRATEGY_PROVIDER} from './select';
 import {MdCommonModule, MdOptionModule} from '@angular/material/core';
 import {OverlayModule} from '@angular/cdk/overlay';
+import {MdFormFieldModule} from '@angular/material/form-field';
 
 
 @NgModule({
@@ -20,7 +21,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
     MdOptionModule,
     MdCommonModule,
   ],
-  exports: [MdSelect, MdSelectTrigger, MdOptionModule, MdCommonModule],
+  exports: [MdFormFieldModule, MdSelect, MdSelectTrigger, MdOptionModule, MdCommonModule],
   declarations: [MdSelect, MdSelectTrigger],
   providers: [MD_SELECT_SCROLL_STRATEGY_PROVIDER]
 })