title: Dropzone.js with single column file-list?
body: <p>I'm trying to wade my way through the combination of bootstrap and dropzone styles but I've run into a problem that is beyond my understanding of either.  The problem I am having is something seems to be splitting my preview pane into two columns and I can't seem to figure out what or where. I'm guessing it's something in dropzone's css but can't seem to find it.</p>
  
  <p>I want my dropzone drag-and-drop area to appear on the bottom of the form in a block starting at bootstrap offset 3 and spanning 6 columns. I also want it to be of a fixed height and just show the filenames, and the progress indicators below them only while the files are in-process. (I have yet to handle the errors)
  I already have the jquery to hunt-and-peck out the progress bars and hide them once the container shows a dz-success.  I also made the area scrollable so it doesn't become unmanageably large as the list of uploaded files grows. (Unfortunately the MVC we use auto-inserts the submit button below your template and it's a major pain to re-locate it without really ugly, fudgy hacks. So to have a file list in the drag-drop area, I need to make it scroll and nix the icons)</p>
  
  <p>My dropzone area looks like the following:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;!-- div class="col-sm-6 col-sm-offset-3 "&gt;&lt;h4&gt;Uploaded files&lt;/h4&gt;&lt;/div --&gt;
      &lt;div class="input-group col-sm-6 col-sm-offset-3 col-xs-12"&gt;
          &lt;div class="dropzone" id="myDropzone" style="height:150px;overflow:hidden; overflow-y:scroll;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am then using a custom template where I dropped the details class to get rid of the 100x100 setting that normally accommodates the preview thumbnail. (I'm going to be dealing with huge numbers of files on this form in some cases so I turned the create thumbnail feature off)</p>
  
  <p>I then use the custom template below:</p>
  
  <pre><code>&lt;div id="template-preview" class="dz-preview dz-file-preview"&gt;
      &lt;div class="small"&gt;
          &lt;span data-dz-name&gt;&lt;/span&gt; &lt;span class="pull-right"&gt;(&lt;span class="dz-size" data-dz-size&gt;&lt;/span&gt;)&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="dz-info"&gt;
          &lt;div class="dz-progress"&gt;&lt;span class="dz-upload" data-dz-uploadprogress&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="dz-error-message"&gt;&lt;span data-dz-errormessage&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried adding a bootstrap col-sm-10 to make the template take up 80% of the dropzone frame but it seems to related to only 50% of the pane so something else is splitting it in two first. Using the computed styles pane in chrome shows a fixed pixel width that is greyed out. Searching through the full style-list, I am not seeing anything immediately obvious in the context listed that is splitting things up.
  I noted that removing the dz-preview class in the outer div gives me the look I want, but without dz-preview specified 'somewhere' I seem to lose the ability to properly find the dz-success and hide the progress indicator once a file is complete.
  I'm not familiar enough with CSS to know how to override whatever it is that the dropzone style is doing and there are so many contextual references in that basic dropzone css file, I can't seem to even find what might be splitting that area in two in the first place.</p>
  
  <p>Any help is appreciated.</p>