drop-zone
drop-zone copied to clipboard
Some dropzone item controls appear over active modal dialogs
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%;
feel free to create a PR with this fix