diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b0c7800083..7b5f29e614f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Added background to `readOnly` inputs ([#1188](https://github.com/elastic/eui/pull/1188)) - Fixed some modal default and responsive sizing ([#1188](https://github.com/elastic/eui/pull/1188)) +- Fixed z-index issue of `EuiComboBoxOptionsList` especiall inside modals ([#1192](https://github.com/elastic/eui/pull/1192)) ## [`4.0.1`](https://github.com/elastic/eui/tree/v4.0.1) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index ab5fc5cf07b..b2132d4e354 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -1,7 +1,6 @@ .euiComboBox { @include euiFormControlSize(auto, $includeAlternates: true); position: relative; - z-index: $euiZComboBox + 1; // Ensures the dropdown's shadow is hidden behind the input on top /** * 1. Allow pills to truncate their text with an ellipsis. diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss index 7193b6da88d..ec5a3e57b25 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss @@ -18,10 +18,11 @@ &.euiComboBoxOptionsList--bottom { /* 4 */ @include euiBottomShadowMedium; - z-index: $euiZComboBox + 2; // Ensures the dropdown's is above the combo box's shadow } &.euiComboBoxOptionsList--top { /* 4 */ - @include euiBottomShadowFlat; + box-shadow: + 0 -2px 4px -1px rgba($euiShadowColor, .2), + 0 0px 2px 0 rgba($euiShadowColor, .2); } } diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss index dcbac034763..56add59ca71 100644 --- a/src/global_styling/variables/_z_index.scss +++ b/src/global_styling/variables/_z_index.scss @@ -27,8 +27,8 @@ $euiZLevel9: 9000; $euiZContent: $euiZLevel0; $euiZHeader: $euiZLevel1; $euiZContentMenu: $euiZLevel2; -$euiZComboBox: $euiZContentMenu - 1; $euiZNavigation: $euiZLevel4; $euiZMask: $euiZLevel6; $euiZModal: $euiZLevel8; +$euiZComboBox: $euiZModal + 1; $euiZToastList: $euiZLevel9;