-1

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 user1@example.com 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.

Evert
  • 2,022
  • 1
  • 20
  • 29
  • This really needs a public test case that shows the issue. – Rik May 29 '20 at 08:10
  • @Rik okay I deployed my code here: http://laf.devign.nl/items/new Login using user1@example.com and the password is "secret" (without ""). You'll see the 2 upload fields. The bottom one looks good, but that's actually done with an unreliable css hack. Which doesn't even work for the top one as you can see. Does this help? – Evert May 29 '20 at 12:31
  • Try to remove all the custom styles applied to FilePond. I think "max-height: 1000000px;" is weird to have in a * selector, not sure if related but I'd remove it. The "height: 2.1875rem;" style on .custom-file-input is preventing it from showing any files. – Rik Jun 01 '20 at 06:13
  • @Rik, that tip helped me to fix my problem, thank you! – Evert Jun 02 '20 at 14:34

1 Answers1

0

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.

Evert
  • 2,022
  • 1
  • 20
  • 29