From 02d3d6279755dfda6008509a071d202866a70205 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 12 Dec 2022 16:45:21 -0500 Subject: [PATCH] fix(styling): Grid Menu & Col Picker overflow in Firefox - remove overflow-x for all browsers, we don't need a scroll to show at any point in time for the x coordinate - Firefox has issues when overflow (auto) shows the scroll, it shows up over the text while Chrome seems to add necessary padding to avoid that problem, so we can add a fixed right padding for Firefox only, we don't want to make it too wide because that would look funny --- packages/common/src/styles/_variables.scss | 4 ++++ packages/common/src/styles/slick-component.scss | 1 + packages/common/src/styles/slick-plugins.scss | 15 +++++++++++++-- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 14341c42a..f0151ad5b 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -296,6 +296,7 @@ $slick-column-picker-close-btn-position-right: 5px !default; $slick-column-picker-close-btn-position-top: 0px !default; $slick-column-picker-min-width: 150px !default; $slick-column-picker-padding: 6px !default; +$slick-column-picker-padding-firefox: 6px 14px 6px 6px !default; $slick-column-picker-divider-width: 100% !default; $slick-column-picker-item-border: 1px solid transparent !default; $slick-column-picker-item-border-radius: 0px !default; @@ -356,6 +357,7 @@ $slick-menu-item-hover-border: 1px solid #d5d5d5 !d $slick-menu-item-hover-color: #fafafa !default; $slick-menu-item-padding: 2px 6px !default; $slick-menu-item-width: 100% !default; +$slick-menu-item-white-space: nowrap !default; $slick-menu-icon-font-size: $slick-icon-font-size !default; $slick-menu-icon-line-height: calc(#{$slick-menu-icon-font-size} + 2px) !default; $slick-menu-item-width-when-button: calc(100% - #{$slick-menu-close-btn-width}) !default; @@ -365,6 +367,7 @@ $slick-menu-line-height: 24px !default; $slick-menu-min-width: 140px !default; $slick-menu-option-list-margin-bottom: 6px !default; $slick-menu-padding: 6px !default; +$slick-menu-padding-firefox: 6px 14px 6px 6px !default; $slick-menu-title-container-display: flex !default; $slick-menu-title-container-align-items: flex-start !default; $slick-menu-title-container-justify-content: flex-end !default; @@ -797,6 +800,7 @@ $slick-pagination-page-input-bgcolor: #fafbed !default; $slick-pagination-page-input-height: 26px !default; $slick-pagination-page-input-width: 50px !default; $slick-pagination-page-input-padding: 2px !default; +$slick-pagination-page-select-bg-color: #fff !default; $slick-pagination-page-select-border-radius: 3px !default; $slick-pagination-page-select-padding: 0 0 2px 2px !default; $slick-pagination-page-select-height: 32px !default; diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss index 535a14536..274d06607 100644 --- a/packages/common/src/styles/slick-component.scss +++ b/packages/common/src/styles/slick-component.scss @@ -204,6 +204,7 @@ padding: 2px; select { + background-color: var(--slick-pagination-page-select-bg-color, $slick-pagination-page-select-bg-color); font-size: var(--slick-pagination-page-select-font-size, $slick-pagination-page-select-font-size); line-height: 1.5; height: var(--slick-pagination-page-select-height, $slick-pagination-page-select-height); diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index bfe9e7f52..c9fe86066 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -14,7 +14,8 @@ li.hidden { cursor: default; list-style-type: none; position: absolute; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; resize: both; width: max-content; font-family: var(--slick-font-family, $slick-font-family); @@ -23,6 +24,10 @@ li.hidden { border-radius: var(--slick-column-picker-border-radius, $slick-column-picker-border-radius); min-width: var(--slick-column-picker-min-width, $slick-column-picker-min-width); padding: var(--slick-column-picker-padding, $slick-column-picker-padding); + @-moz-document url-prefix() { + /* add right padding to avoid scrollback showing over text, but for firefox since webkit is ok */ + padding: var(--slick-column-picker-padding-firefox, $slick-column-picker-padding-firefox); + } box-shadow: var(--slick-column-picker-box-shadow, $slick-column-picker-box-shadow); z-index: var(--slick-column-picker-z-index, $slick-column-picker-z-index); @@ -265,6 +270,7 @@ li.hidden { list-style: none outside none; padding: var(--slick-menu-item-padding, $slick-menu-item-padding); width: var(--slick-menu-item-width, $slick-menu-item-width); + white-space: var(--slick-menu-item-white-space, $slick-menu-item-white-space); &:hover { border: var(--slick-menu-item-hover-border, $slick-menu-item-hover-border); @@ -338,10 +344,15 @@ li.hidden { border-radius: var(--slick-menu-border-radius, $slick-menu-border-radius); min-width: var(--slick-menu-min-width, $slick-menu-min-width); padding: var(--slick-menu-padding, $slick-menu-padding); + @-moz-document url-prefix() { + /* add right padding to avoid scrollback showing over text, but for firefox since webkit is ok */ + padding: var(--slick-menu-padding-firefox, $slick-menu-padding-firefox); + } z-index: 100000; cursor: default; display: inline-block; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; resize: both; /* make sure that other UI frameworks aren't overriding our properties (Bulma was one of them affecting this) */