Dropzone.js 删除隐藏在弹出消息后面的链接答案

【问题标题】：Dropzone.js remove link hidden behind pop-up messageDropzone.js 删除隐藏在弹出消息后面的链接
【发布时间】：2015-02-24 08:40:27
【问题描述】：

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

但是，当文件被拒绝时，如果文件太大或不允许扩展名，弹出的错误消息会隐藏“删除”链接，因此您无法删除那个坏文件图标。

有没有办法解决这个问题？

我认为您可以设置自动从队列中删除不良项目，但用户不会收到解释消息。

也许隐藏坏文件的“删除”文本并添加指向弹出消息的链接？

或者将“删除”链接更改为图标右下角不会隐藏的小“X”图标？

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

【问题讨论】：

标签： jquery dropzone.js

【解决方案1】：

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

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

结果如下：

【讨论】：

!important 是绝对必要的吗？我不认为这是我的情况。
@BenJohnson 这取决于，但可能不是，所以你可以删除它。

【解决方案2】：

当遇到同样的问题时，我选择通过将工具提示稍微向下移动并更改其箭头的位置和大小来解决它，以免遮挡删除链接。我还将链接的文本缩短为“删除”，并将其样式设置为更好看。

这是我的 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;
}

【讨论】：