Search code examples
javascriptcsscss-transformsfilepond

Why does FilePond render incorrectly on my website?

I can't figure this out for the life of me. When I implement FilePond on my website, it renders incorrectly. See this screenshot.

screenshot filepond

As you can see, there are 2 instances of FilePond there. The second one looks correct, but I did that in a hacky way that falls apart as soon as you start adding files to it. In the same screenshot you can see that I opened developer tools and highlighted a line. That highlighted line and the one below it are the problem. They show the transformations that FilePond has calculated for those divs which are the wrong transformations and they are what cause the gray area to be too short.

What could I be doing wrong in my project to cause Filepond to suddenly calculate the wrong css transformations for .filepond--panel-center and .filepond--panel-bottom? Please help!

I am aware that the most common mistake is that people forget to add <!DOCTYPE html> at the top of their page. I did not forget that.

Okay so here's my website deployed so that you can see it for yourself: http://laf.devign.nl/items/new

Log in using [email protected] and secret.

If you happen to be on a Mac, for some reason it does render correctly in Safari. So you can compare it with that to see what it should look like. It's Chrome in which it doesn't render correctly.

Solution

  • So thanks to Rik's comment I started to look for css rules that applied to both the <input type="file" /> element and to all the html that Filepond generated after transforming the file input.

    Here's all the css that I found that interfered:

    • Like Rik said, there was this weird css rule in the code: * { max-height: 1000000px; }. This was responsible for the filepond divs rendering too short as seen in the screenshot in my OP. (In my defense, I didn't write that rule, the css was delivered to me by someone else on the team 😬)
    • Besides that, my form was being generated from a bootstrap template and therefore my file-input was generated with a class <input type="file" class="custom-file-input" />.

    After removing that css rule and that class from the file-input Filepond finally rendered correctly in all the browsers.