fix: fix IE11 #date-picker sizing issue not showing days in correct w…

…eekday column
dnbexperience · Aug 6, 2019 · 6242d62 · 6242d62
1 parent bc7713c
commit 6242d62
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -1753,7 +1753,8 @@ legend.dnb-form-label {
     justify-content: space-between;
     padding: 1rem; }
   .dnb-date-picker__labels__day {
-    padding: 1.5rem 0 0.5rem; }
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem; }
   .dnb-date-picker__labels, .dnb-date-picker__days {
     min-width: 18rem;
     max-width: 18rem;
@@ -1854,6 +1855,8 @@ legend.dnb-form-label {
   @media screen and (-ms-high-contrast: none) {
     .dnb-date-picker {
       flex: none; }
+      .dnb-date-picker__day, .dnb-date-picker__labels__day {
+        flex-basis: 13.48571%; }
       .dnb-date-picker__day .dnb-button,
       .dnb-core-style .dnb-date-picker__day .dnb-button, .dnb-date-picker__day .dnb-button__bounding {
         top: 0;

diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -236,13 +236,13 @@
 
   &__labels {
     &__day {
-      padding: 1.5rem 0 0.5rem;
+      padding-top: 1.5rem;
+      padding-bottom: 0.5rem;
     }
   }
 
   &__labels,
   &__days {
-    // min-width: 12rem;
     min-width: 18rem;
     max-width: 18rem;
 
@@ -391,6 +391,12 @@
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     flex: none;
+
+    &__day,
+    &__labels__day {
+      flex-basis: percentage(1 / 7) - 0.8;
+    }
+
     &__day {
       .dnb-button {
         &,