Dropzone.js 与单列文件列表？答案

【问题标题】：Dropzone.js with single column file-list?Dropzone.js 与单列文件列表？
【发布时间】：2017-07-14 18:15:29
【问题描述】：

我正在尝试结合 bootstrap 和 dropzone 样式，但我遇到了一个超出我理解范围的问题。我遇到的问题似乎是将我的预览窗格分成两列，我似乎无法弄清楚是什么或在哪里。我猜它是 dropzone 的 css 中的东西，但似乎找不到。

我希望我的 dropzone 拖放区域出现在表单底部的一个块中，该块从引导偏移量 3 开始并跨越 6 列。我还希望它具有固定的高度，并且仅在文件正在进行时才显示文件名和它们下方的进度指示器。（我还没有处理错误）一旦容器显示 dz-success，我已经有了 jquery 来寻找进度条并隐藏它们。我还使该区域可滚动，这样它就不会随着上传文件列表的增长而变得难以管理。（不幸的是，我们使用的 MVC 会在您的模板下方自动插入提交按钮，并且在没有真正丑陋、笨拙的黑客攻击的情况下重新定位它是一个很大的痛苦。所以要在拖放区域中有一个文件列表，我需要制作它滚动并取消图标）

我的拖放区如下所示：

<div class="row">
    <!-- div class="col-sm-6 col-sm-offset-3 "><h4>Uploaded files</h4></div -->
    <div class="input-group col-sm-6 col-sm-offset-3 col-xs-12">
        <div class="dropzone" id="myDropzone" style="height:150px;overflow:hidden; overflow-y:scroll;">
        </div>
    </div>
</div>

然后，我使用自定义模板删除了详细信息类，以摆脱通常容纳预览缩略图的 100x100 设置。（在某些情况下，我将在此表单上处理大量文件，因此我关闭了创建缩略图功能）

然后我使用下面的自定义模板：

<div id="template-preview" class="dz-preview dz-file-preview">
    <div class="small">
        <span data-dz-name></span> <span class="pull-right">(<span class="dz-size" data-dz-size></span>)</span>
    </div>
    <div id="dz-info">
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

我尝试添加一个引导程序 col-sm-10 以使模板占据 80% 的 dropzone 框架，但它似乎只与窗格的 50% 相关，因此其他东西首先将其分成两部分。使用 chrome 中的计算样式窗格显示一个固定的像素宽度，该宽度显示为灰色。搜索完整的样式列表，我没有在列出的上下文中看到任何明显的分裂事物。我注意到删除外部 div 中的 dz-preview 类给了我想要的外观，但是如果没有在“某处”指定 dz-preview，我似乎失去了正确找到 dz-success 并在文件中隐藏进度指示器的能力完成了。我对 CSS 不够熟悉，不知道如何覆盖 dropzone 样式正在执行的任何操作，并且该基本 dropzone css 文件中有很多上下文引用，我似乎什至找不到可能拆分该区域的内容首先是两个。

感谢任何帮助。

【问题讨论】：

你能在 jsfiddle 上添加一个工作示例吗？
天哪，我需要更新这个，因为我终于找到了设置“宽度：50%”的样式

标签： jquery css twitter-bootstrap dropzone.js

【解决方案1】：

好的，我终于找到了影响它的样式，所以我为我的 div 添加了一个 nofile-preview 上下文，然后在我的文件中添加了一个本地类样式定义：（注意，我的 dropzone 的包装器使用 ' dropzone'作为名称。显然也支持dropzone-preview）

.dropzone .dz-preview.dz-nofile-preview {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

<div id="dropzonePreviewTemplate" style="display: none">
    <div id="template-preview" class="dz-preview dz-nofile-preview">
        <div class="small">
            <span class="" data-dz-name></span> <span class="pull-right">(<span class="dz-size" data-dz-size></span>)</span>
        </div>
    </div>
</div>

【讨论】：