Question

我试图通过bootstrap和dropzone样式的组合来解决问题，但是我遇到了一个我无法理解的问题。我遇到的问题似乎是将我的预览窗格分成两列，我似乎无法弄清楚是什么或在哪里。我猜它是dropzone的css中的东西，但似乎无法找到它。

我希望我的dropzone拖放区域显示在窗体底部的一个块中，从bootstrap offset 3开始，跨越6列。我还希望它具有固定的高度，只显示文件名，并且只有在文件处于进程中时才会显示它们下方的进度指示器。（我还没有处理错误）我已经有了jquery来捕获并查看进度条并在容器显示dz成功后隐藏它们。我还使该区域可滚动，因此随着上传文件列表的增长，它不会变得无法管理。（不幸的是我们使用的MVC自动插入模板下方的提交按钮，重新找到它是一个很大的痛苦，没有真正丑陋，愚蠢的黑客。所以要在拖放区域有一个文件列表，我需要使其滚动并修改图标）

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

然后我使用自定义模板删除了详细信息类，以摆脱通常容纳预览缩略图的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中的计算样式窗格显示灰色的固定像素宽度。通过完整的样式列表进行搜索，我在上面列出的上下文中没有看到任何直接显而易见的东西。我注意到删除外部div中的dz-preview类给了我想要的外观，但没有指定dz-preview＆＃39;某处＆＃39;我似乎失去了正确找到dz成功的能力，并在文件完成后隐藏进度指示器。我不熟悉CSS知道如何覆盖dropzone风格正在做的事情，并且在那个基本的dropzone css文件中有很多上下文引用，我似乎甚至无法找到可能的内容首先将该区域分成两部分。

感谢任何帮助。

Answer 1

好的，我终于发现其中一个样式正在影响它，所以我为我的div添加了一个nofile-preview上下文，然后在我的文件中添加了一个本地类样式定义:(注意，我的dropzone的包装器正在使用＆＃39; dropzone＆＃39;作为名称。显然也支持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>

具有单列文件列表的Dropzone.js？

1 个答案: