使用单列文件列表的Dropzone.js？

Question

我正在尝试组合bootstrap和dropzone样式，但我遇到了一个超出我理解的问题。我遇到的问题是，我的预览窗格似乎被分成了两列，我似乎找不出是什么，也不知道在哪里。我猜它在dropzone的css中，但似乎找不到它。

我希望我的dropzone拖放区域出现在窗体底部的一个块中，从引导偏移量3开始，跨越6列。我还希望它有一个固定的高度，只显示文件名，只有当文件正在处理时，它们下面的进度指示器。(我还没有处理这些错误)我已经有了jquery，它可以在容器显示dz-success时搜索并剔除进度条并隐藏它们。我还将区域设置为可滚动，这样它就不会随着上传文件列表的增长而变得难以管理。(不幸的是，我们使用的MVC会自动在你的模板下面插入提交按钮，并且在没有真正丑陋、笨拙的hack的情况下重新定位它是一个很大的痛苦。因此，为了在拖放区域中有一个文件列表，我需要让它滚动并取消图标)

我的dropzone区域如下所示：

<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>

然后，我使用了一个自定义模板，其中我删除了details类，以摆脱通常包含预览缩略图的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>

我尝试添加一个bootstrap col-sm-10来使模板占据dropzone框架的80%，但它似乎只与窗格的50%相关，所以其他东西首先将其一分为二。在chrome中使用计算的样式窗格会显示灰显的固定像素宽度。通过搜索完整的style-list，我在列出的上下文中没有看到任何明显的东西是分裂的。我注意到，删除外部div中的dz-preview类会给我想要的外观，但如果没有指定dz-preview‘某处’，我似乎失去了正确查找dz-success并在文件完成后隐藏进度指示器的能力。我对CSS还不够熟悉，不知道如何覆盖dropzone样式正在做的任何事情，而且在这个基本的dropzone css文件中有如此多的上下文引用，我甚至不知道是什么将该区域一分为二。

任何帮助都是非常感谢的。

Answer 1

好了，我终于找到了影响它的样式，所以我为我的div添加了一个nofile预览上下文，然后在我的文件中添加了一个本地类样式定义：(注意，我的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>