From 71887197674be389c64c2a55ea797c9579f88847 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 4 Jan 2019 23:59:24 +0200 Subject: [PATCH] fix(select): don't shift arrow if there is no label (#14607) Currently we move the arrow for a `mat-select` inside a form field up if it has a value, in order to align it in the middle of the field, however doing so when there is no label makes it look off-center. This is visible when using the `standard` appearance inside a `mat-paginator`. These changes only shift the arrow if there's a label. Fixes #13907. --- src/lib/form-field/form-field.ts | 1 + src/lib/select/select.scss | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index fd5c0494eccf..c481577776f9 100644 --- a/src/lib/form-field/form-field.ts +++ b/src/lib/form-field/form-field.ts @@ -121,6 +121,7 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS = '[class.mat-form-field-invalid]': '_control.errorState', '[class.mat-form-field-can-float]': '_canLabelFloat', '[class.mat-form-field-should-float]': '_shouldLabelFloat()', + '[class.mat-form-field-has-label]': '_hasFloatingLabel()', '[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()', '[class.mat-form-field-disabled]': '_control.disabled', '[class.mat-form-field-autofilled]': '_control.autofilled', diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 22365e7f64d5..fcf98c9261db 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -57,10 +57,11 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a } // When used in a standard appearance form-field the arrow should be shifted up 50%, - // but only if it's not empty - .mat-form-field-appearance-standard .mat-select:not(.mat-select-empty) & { - transform: translateY(-50%); - } + // but only if it's not empty and it has a label. + .mat-form-field-appearance-standard.mat-form-field-has-label + .mat-select:not(.mat-select-empty) & { + transform: translateY(-50%); + } // Animate the arrow position, but only when the transitioning to empty (animate the arrow down) // This is in line with the mat-form-field label animation