From 76ae625886a0d98737bda8d1f8c4c29eef7660c6 Mon Sep 17 00:00:00 2001 From: Michal Salamon Date: Wed, 4 Dec 2019 17:05:30 +0100 Subject: [PATCH] Set height value lower than min-height to prevent align-items reset on IE11 --- src/_nested-list.scss | 4 +- test/templates/side-nav/index.njk | 196 ++++++++++++++++++++++++++---- 2 files changed, 178 insertions(+), 22 deletions(-) diff --git a/src/_nested-list.scss b/src/_nested-list.scss index d191d9afcc..9850a238b6 100644 --- a/src/_nested-list.scss +++ b/src/_nested-list.scss @@ -112,7 +112,9 @@ $block: #{$fd-namespace}-nested-list; &::after { @include fd-flex-center(); @include fd-nested-list-arrow(); - + // `height: 0` is set to prevent breaking `align-items: center` on IE11 + // Read more https://github.com/philipwalton/flexbugs/issues/231 + height: 0; min-height: 100%; min-width: 2.75rem; color: var(--sapList_TextColor); diff --git a/test/templates/side-nav/index.njk b/test/templates/side-nav/index.njk index 0888549a3c..7ab84c12e4 100644 --- a/test/templates/side-nav/index.njk +++ b/test/templates/side-nav/index.njk @@ -7,20 +7,45 @@ {% set example %} + {% endset %} {{ format(example) }} @@ -28,21 +53,150 @@

Side navigation with icons - condensed state

{% set example %} +{% endset %} +{{ format(example) }} + +{% set example %} + + {% endset %} {{ format(example) }} + {% endblock %}