帶單列文件列表的Dropzone.js？

我試圖通過引導和懸浮窗樣式的組合來趟我的方式，但我碰到的是超出了我的理解任何一個問題。我遇到的問題似乎是將我的預覽窗格分成兩列，我似乎無法弄清楚什麼或在哪裏。我猜這是在dropzone的CSS中的東西，但似乎無法找到它。帶單列文件列表的Dropzone.js？

我希望我的懸浮窗拖和拖放區域對底部形態出現在開始引導塊偏移3跨6個列。我也希望它是一個固定的高度，只顯示文件名，以及它們下面的進度指示器，只有在文件正在處理中。（我還沒有處理的錯誤）我已經有jQuery的狩獵和啄出進度條，並隱藏他們一旦容器顯示DZ-成功。我還將該區域設置爲可滾動，因此隨着上傳文件列表的增長，它不會變得難以管理。（不幸的是，我們使用的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使模板佔用dropzone框架的80％，但它似乎只與窗格的50％有關，所以其他的東西首先將它分成兩部分。在chrome中使用計算的樣式窗格顯示灰色的固定像素寬度。通過完整的樣式列表搜索，我沒有看到任何立即顯而易見的事情在上下文中分裂的事情。我注意到，在外層div去掉DZ-預覽類給我我想要的外觀，但沒有指定的「地方」我似乎失去正確找到DZ-成功的能力和隱藏一次進度指示器DZ-預覽文件完整。我不夠用CSS熟悉，知道如何重寫不管它是懸浮窗樣式在做什麼，也有在該基本懸浮窗css文件這麼多的環境關係，我似乎無法找到，甚至可能是什麼是分裂首先是兩個區域。

任何幫助表示讚賞。

來源

2017-07-14 Scott

你可以在jsfiddle上添加一個工作示例嗎？ – Hackerman

哦拍，我需要更新這個，因爲我終於找到了設置'寬度：50％'的風格 – Scott

OK，我終於發現了其中的樣式之一是影響它，所以我說，然後我的DIV一個NOFILE預覽上下文我的文件添加本地類樣式定義：（注意，我爲我的懸浮窗的包裝使用'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>

來源

2017-07-18 16:39:47 Scott

帶單列文件列表的Dropzone.js？

回答

相關問題