1

I'll like to use the fil input from bootstrap with the drag and drop area but and image preview but I do not it really small about 100px height and 150px width... I cannot find the way to do it...

It goes inside a div table with a lot of rows, and on one column of each row there is the file input, as follows:

  <div id="readyCompilations">
    <div id="filaCompilations-183" style="height: 60px;" class="row">
      <div class="col">null</div>
      <div class="col">Title</div>
      <div class="col">Description</div>
      <div class="col">Tags</div>
      <div class="col-6">
        <div class="file-loading">
          <input id="fileinput-183" name="fileinput-183" type="file">
        </div>
      </div>
    </div>

and the javascript:

    <script>
      $(document).ready(function() {
        $("#fileinput-183").fileinput({
          uploadUrl: "/file-upload-single/1",
          maxFileCount: 1,
          theme: 'explorer-fa5',
          showBrowse: false,
          browseOnZoneClick: true
        });
</script>

All the icons, image title, image size , etc.. I do not need it, must be also removed to fit on the 100x150px cell

Any help?

Thanks

Peter Czask
  • 63
  • 8

1 Answers1

0

If you use some developer tools to look at the CSS and how it affects size (say "Developer Tools" in Chrome and then "Elements" tab) you will find that the padding for the CSS class file-drop-zone-title is what is making the drop zone so big. Once a file is dropped on it, the size will be controlled by what options you display with a file, and the .krajee-default.file-preview-frame. So in your own CSS set these to something smaller, say:

.file-drop-zone-title {
    padding: 40px 10px;
}
.krajee-default.file-preview-frame {
    width: 213px;
    height: 80px;
}

That will shrink the drop zone to something manageable.

David Stanley
  • 333
  • 3
  • 12