Fix input icon being hidden on input focus
Both the datepicker and password fields have an assoicated icon. When
the input element receives focus the associated icons are hidden. This
is caused by a z-index issue and was a bug created when fixing another
bug that caused the datepicker icon from rendering above the table
batch actions toolbar.
Both bugs have been resolved with this patchset.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: If923cd5bc6a076b01efa44492f717b78fb6584ca
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 7754f0a..2a7b816 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -71,6 +71,7 @@
position: absolute;
right: 0;
top: 0;
+ z-index: $zindex-dropdown + 1;
}
// Contain input buttons within input
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 4baf836..85c11a4 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -74,12 +74,11 @@
.toolbar-container {
width: 100%;
position: relative;
- z-index: 5;
+ z-index: $zindex-dropdown + 1;
}
.toolbar-content {
height: $toolbar-height;
- z-index: $zindex-dropdown + 1;
background-color: theme-color('primary');
color: $white;
position: absolute;