简体繁体 English

为什么 FilePond 在我的网站上呈现不正确？

[英]Why does FilePond render incorrectly on my website?

原文 2020-05-22 10:00:02 7 2 javascript/ css/ css-transforms/ filepond

I can't figure this out for the life of me.我这辈子都想不通。 When I implement FilePond on my website, it renders incorrectly.当我在我的网站上实现 FilePond 时，它呈现不正确。 See this screenshot.请参阅此屏幕截图。

As you can see, there are 2 instances of FilePond there.如您所见，那里有 2 个 FilePond 实例。 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.它们显示了 FilePond 为那些错误转换的 div 计算的转换，它们是导致灰色区域太短的原因。

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 ?我在项目中做错了什么导致 Filepond 突然为.filepond--panel-center和.filepond--panel-bottom计算错误的 css 转换？ Please help!请帮忙！

I am aware that the most common mistake is that people forget to add <!DOCTYPE html> at the top of their page.我知道最常见的错误是人们忘记在页面顶部添加<!DOCTYPE html> 。 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好的，这是我部署的网站，以便您自己查看： http://laf.devig.nl/items/new

Log in using user1@example.com and secret .使用user1@example.com和secret登录。

If you happen to be on a Mac, for some reason it does render correctly in Safari.如果您碰巧在 Mac 上，由于某种原因，它确实在 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.它是无法正确呈现的 Chrome。

2 个解决方案

Is it possible the page is missing its doctype declaration?该页面是否可能缺少其 doctype 声明？

<!doctype html>

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.因此，感谢Rik 的评论，我开始寻找适用于<input type="file" />元素和 Filepond 在转换文件输入后生成的所有 html 的 css 规则。

Here's all the css that I found that interfered:这是我发现干扰的所有 css：

Like Rik said, there was this weird css rule in the code: * { max-height: 1000000px; }就像 Rik 说的，代码中有这个奇怪的 css 规则： * { max-height: 1000000px; } * { max-height: 1000000px; } . * { max-height: 1000000px; } 。 This was responsible for the filepond divs rendering too short as seen in the screenshot in my OP.这是造成文件池 div 渲染太短的原因，如我的 OP 中的屏幕截图所示。 _{(In my defense, I didn't write that rule, the css was delivered to me by someone else on the team )} _{（在我的辩护中，我没有写那个规则，css 是团队中的其他人交付给我的）}
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" /> .除此之外，我的表单是从引导模板生成的，因此我的文件输入是使用 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.从文件输入 Filepond 中删除 css 规则和 class 后，最终在所有浏览器中正确呈现。