Dropzone.js remove link hidden behind pop-up message

Question

I am using Dropzone.js to add file drag and drop functions to an upload form, and it looks good and all works great.

However, when a file is rejected, if it is too large or not an allowed extension, the pop up error message hides the "remove" link, so you cant remove that bad file icon.

Is there any way around this?

I think you can set to remove bad items from the queue automatically, but then the user wouldnt get the explanation message.

Maybe hide the "remove" text for a bad file and add a link to the pop up message?

Or change the "remove" links to a small "X" icon at the bottom right corner of the icon that wouldnt be hidden?

Not sure how to do either of these, or if there is a better solution to this?

Answer 1

One solution is customize the dropzonejs CSS for the preview template to adjust the error message. For example, in your case you could update:

.dropzone .dz-preview .dz-error-message {
    top: 150px!important;
}

And this is the result:

Answer 2

When faced with the same problem I chose to solve it by both shifting the tooltip a little lower and changing the position and size of its arrow to not obscure the remove link. I also shortened the text of the link to just "remove" and styled it to look better.

Here are my CSS customizations:

.dropzone .dz-preview .dz-image img {
    margin: auto;   /* center the image inside the thumbnail */
}
.dropzone .dz-preview .dz-error-message {
    top: 140px;     /* move the tooltip below the "Remove" link */
}
.dropzone .dz-preview .dz-error-message:after {
    left: 30px;     /* move the tooltip's arrow to the left of the "Remove" link */
    top: -18px;
    border-bottom-width: 18px;
}
.dropzone .dz-preview .dz-remove {
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
}