Dropzone.js 删除隐藏在弹出消息后面的 link

Question

我正在使用 Dropzone.js 将文件拖放功能添加到上传表单，它看起来不错，一切都很好。

但是，当一个文件被拒绝时，如果它太大或扩展名不允许，弹出的错误消息会隐藏 "remove" link，因此您无法删除该错误文件图标.

有什么解决办法吗？

我想你可以设置自动从队列中删除不良项目，但这样用户就不会收到解释消息。

也许隐藏错误文件的 "remove" 文本并在弹出消息中添加 link？

或者把 "remove" link 改成图标右下角的小 "X" 图标就不会被隐藏了？

不确定如何执行这些操作，或者是否有更好的解决方案？

Answer 1

一种解决方案是为预览模板自定义dropzonejs CSS 以调整错误消息。例如，在您的情况下，您可以更新：

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

这是结果：

Answer 2

当遇到同样的问题时，我选择通过将工具提示向下移动一点并更改其箭头的位置和大小来解决它，以免掩盖删除 link。我还将 link 的文本缩短为 "remove" 并将其样式设置为看起来更好。

这是我的 CSS 定制：

.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;
}

Dropzone.js 删除隐藏在弹出消息后面的 link

Dropzone.js remove link hidden behind pop-up message

jquery

dropzone.js