fix(Modal): ensure IE11 is placing the close button to the right side

dnbexperience · Feb 9, 2022 · 1aab80f · 1aab80f
1 parent 2c9fa02
commit 1aab80f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -1807,6 +1807,12 @@ html[data-dnb-modal-active] {
     display: flex;
     flex-direction: row;
     justify-content: space-between; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-modal__header__bar.dnb-section {
+        align-items: center; } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-core-style .dnb-modal__header__bar__close {
+      margin-left: auto; } }
   .dnb-modal__content--spacing .dnb-modal__header__bar.dnb-section {
     margin-top: calc(var(--modal-spacing) * 1.75);
     margin-bottom: calc(var(--modal-spacing) / 2); }

diff --git a/packages/dnb-eufemia/src/components/modal/style/_modal.scss b/packages/dnb-eufemia/src/components/modal/style/_modal.scss
@@ -330,10 +330,22 @@ html[data-dnb-modal-active] {
     }
   }
 
-  &__header__bar.dnb-section {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  &__header__bar {
+    &.dnb-section {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      @include IS_IE() {
+        align-items: center; // IE11 uses top as default
+      }
+    }
+
+    @include IS_IE() {
+      .dnb-core-style &__close {
+        margin-left: auto; // place the button to the right side
+      }
+    }
   }
 
   &__content--spacing &__header__bar.dnb-section {