Pasek postępu pobierania Dropzone.js nie pokazuje się

Question

Używam Dropzone.js do przesyłania plików i działa idealnie, z wyjątkiem tego, że pasek postępu nie pojawia się. Nie ma błędów. Używam Bootstrap na przednim końcu strony.

Po wgraniu pliku, gdybym sprawdzić element w Chrome, widzę, że zarówno on i jego rodzic mieć wysokość 0px:

Najdziwniejsze jest to, gdybym ręcznie ustawić wysokość do 10 pikseli, pozostaje 0px. Nawet jeśli ustawię szerokość i wysokość w linii, w inspektorze elementów pozostanie szerokość i wysokość 0px. (dz-progress, element nadrzędny div zostanie zmieniony, jeśli go ustawię).

Domyślam się, że coś w Bootstrap lub jquery jest w konflikcie z tym, ale nie jestem wystarczająco dobry w CSS, aby je wykryć (jeśli to nawet problem z CSS). Oto mój odpowiedni kod. Wystawiam Dropzone z Jquery na tagu body, dzięki czemu możesz upuścić plik w dowolnym miejscu w oknie przeglądarki.

<div id="upload"> 
Drag and drop anywhere on the page to upload, or click here to select files. 
</div> 
<div id="uploads"></div> 

<script src="bootstrap\js\jquery-2.1.0.min.js"></script> 
<script src="bootstrap\js\bootstrap.min.js"></script> 
<script src="bootstrap\js\dropzone.js"></script> 
<script type="text/javascript"> 
    $("body").dropzone({ url: "upload.php", maxFilesize: 10, previewsContainer: "#uploads", clickable: "#upload", paramName: "userfile", success: function(file, response){ alert("success: "+response); }, error: function(file, response){ alert("error: " +response); }, method: "post" }); 
</script> 

Wszelkie pomysły zostaną docenione.

Answer 1

Rozwiązany. Ten CSS dodany do dropzone.css naprawił:

.dz-upload { 
    display: block; 
    background-color: red; 
    height: 10px; 
    width: 0%; 
} 

Dodawanie display: block dał rozpiętości ale to wciąż nie pojawia. Dodanie wysokości i koloru tła w końcu się pojawiło. Dodanie width: 0% upewniło się, że zaczęło być niewidoczne (w przeciwnym razie zaczynałoby się jako pełny pasek, a następnie odskakiwałoby, gdy zaczął się postęp).