From 4f43f5c63d2c7f697f246a573f2718014f8d71f3 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 5 Oct 2018 18:02:23 +0200 Subject: [PATCH] fix(chips): content not centered vertically on IE in some cases (#13260) Fixes the chip content not being centered on IE when using a chip avatar. The issue comes from the fact that IE's centering doesn't work if the element has a `min-height`, but not a `height`. --- src/lib/chips/chips.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss index 6194dbba624..607be2135da 100644 --- a/src/lib/chips/chips.scss +++ b/src/lib/chips/chips.scss @@ -43,6 +43,11 @@ $mat-chip-remove-size: 18px; cursor: default; min-height: $mat-chip-min-height; + // Centering the content using flexbox won't work on IE, if we have + // a `min-height` without setting a `height`. This height won't do + // anything since it's less than the minimum set above. + height: 1px; + .mat-chip-remove.mat-icon { width: $mat-chip-remove-size; height: $mat-chip-remove-size;