Filepond: Height of filepond--root not updating

Created on 1 Dec 2019 · 2Comments · Source: pqina/filepond

Summary

The "filepond--root" div's height doesn't get updated so the following elements are behind the filepond.

How it is:
Bildschirmfoto 2019-12-01 um 11 40 47

How it should be:
Bildschirmfoto 2019-12-01 um 11 41 30

How to reproduce

Visit https://forms.neulia.de/onboarding/test

or use this code:

<head>
  <!-- add to document <head> -->
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
  <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

  <style>
    #test {
      height: 100px;
      width: 100%;
      background: #eee;
      display: flex;
    }

    #test > h1 {
      margin: auto;
    }

    .filepond--drop-label {
      background: #696969;
      color: #fff;
    }
  </style>

</head>

<body>
  <!-- add before </body> -->
  <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>

  <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<!--
The classic file input element we'll enhance
to a file pond, configured with attributes
-->
<input type="file"
    class="filepond"
    name="filepond"
    multiple
    data-max-file-size="3MB"
    data-max-files="3">

<div id="test">
  <h1>THIS SHOULD BE BELOW THE FILEPOND</h1>
</div>

<script>
  // Select the file input and use
  // create() to turn it into a pond
  FilePond.registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

  FilePond.create(
      document.querySelector('input')
  );

</script>

</body>

Expected behaviour

Like on https://pqina.nl/filepond/#multi-file-demo the height of the filepond--root should be updated (when you inspect it, you see that the CSS "height" attribute of it gets modified"

Source