drop-zone icon indicating copy to clipboard operation
drop-zone copied to clipboard

Some dropzone item controls appear over active modal dialogs

Open IvanRibkov opened this issue 3 years ago • 1 comments

Style dropzone__item-controls conflicts with some modal dialogs because of huge z-index. I fixed this issue using such patch but I think it's better to make some setting for z-index.

--- node_modules/dropzone-vue/dist/drop-zone.common.css	2022-01-05 01:32:20.000000000 +0300
+++ node_modules/dropzone-vue/dist/drop-zone.common.css	2021-12-30 17:16:13.185332736 +0300
@@ -166,7 +166,7 @@
   padding: 4px; }
 
 .dropzone__item:hover {
-  z-index: 1000; }
+  z-index: 10; }
 
 .dropzone__item {
   position: relative;
@@ -175,7 +175,7 @@
 .dropzone__error-mark, .dropzone__success-mark {
   pointer-events: none;
   opacity: 0;
-  z-index: 500;
+  z-index: 5;
   position: absolute;
   display: block;
   top: 8px;
@@ -249,7 +249,7 @@
 .dropzone__item-controls {
   display: inline-block;
   position: absolute;
-  z-index: 10000;
+  z-index: 100;
   border-radius: 4px;
   top: 8px;
   right: 8px; }
@@ -289,7 +289,7 @@
   border: 1px solid transparent; }
 
 .dropzone__details {
-  z-index: 20;
+  z-index: 2;
   position: absolute;
   top: 0;
   left: 0;
@@ -297,7 +297,7 @@
 
 .dropzone__progress {
   opacity: 1;
-  z-index: 1000;
+  z-index: 10;
   position: absolute;
   left: 50%;
   top: 50%;
--- node_modules/dropzone-vue/dist/dropzone-vue.common.css	2022-01-05 01:32:20.000000000 +0300
+++ node_modules/dropzone-vue/dist/dropzone-vue.common.css	2021-12-30 17:14:47.613674808 +0300
@@ -166,7 +166,7 @@
   padding: 4px; }
 
 .dropzone__item:hover {
-  z-index: 1000; }
+  z-index: 10; }
 
 .dropzone__item {
   position: relative;
@@ -175,7 +175,7 @@
 .dropzone__error-mark, .dropzone__success-mark {
   pointer-events: none;
   opacity: 0;
-  z-index: 500;
+  z-index: 5;
   position: absolute;
   display: block;
   top: 8px;
@@ -249,7 +249,7 @@
 .dropzone__item-controls {
   display: inline-block;
   position: absolute;
-  z-index: 10000;
+  z-index: 100;
   border-radius: 4px;
   top: 8px;
   right: 8px; }
@@ -289,7 +289,7 @@
   border: 1px solid transparent; }
 
 .dropzone__details {
-  z-index: 20;
+  z-index: 2;
   position: absolute;
   top: 0;
   left: 0;
@@ -297,7 +297,7 @@
 
 .dropzone__progress {
   opacity: 1;
-  z-index: 1000;
+  z-index: 1;
   position: absolute;
   left: 50%;
   top: 50%;

IvanRibkov avatar Jan 05 '22 00:01 IvanRibkov

feel free to create a PR with this fix

darknessnerd avatar Feb 11 '22 10:02 darknessnerd