Dropzone.js upload progress bar not showing

Question

I'm using Dropzone.js for file uploads, and it's working perfectly except that the progress bar is not appearing. There are no errors. I'm using Bootstrap for the front end of the site.

After uploading a file, if I inspect the element in Chrome, I see that both it and its parent have a height of 0px:

The strange thing is, if I manually set the height to 10px, it remains 0px. Even if I set the width and height inline, it remains 0px width and height in the element inspector. (dz-progress, the parent div, will change if I set it, though.)

My best guess is that something in Bootstrap or jquery is conflicting with it, but I'm not good enough with CSS to ferret it out (if it's even a CSS issue). Here is my relevant code. I instantiate Dropzone with Jquery, on the body tag, so that you can drop a file anywhere in the browser window.

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

Any ideas will be appreciated.

Answer 1

Solved. This CSS added to dropzone.css fixed it:

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

Adding display: block gave the span width but it was still not appearing. Adding the height and background color finally made it appear. Adding width: 0% made sure it started invisible (otherwise it would start as a full bar, then jump back when progress began).