Question

我正在尝试使Filepond正常工作，但是CSS中的这一行似乎破坏了它-在ul选择器中的overflow: hidden;。

我尝试对页面的整个部分进行微调，直到Filepond正常工作，在CSS上清零，最后在ul {}中提到了上述行。我可以清除所有其他内容，仅保留该行，而Filepond仍然坏掉，所以我可以确定这是问题所在，但我不知道如何解决。

我尝试使用Chrome的Inspector功能查看运行时页面源，但在那里找不到溢出。

然后，我使用Notepad ++的“文件中搜索”功能彻底搜索Filepond文件中的“溢出”，但找不到与ul结合使用的文件。我能得到的最接近的是JS文件中名为const的列表。不知何故，我认为这无关紧要，但idk为什么。如果需要，将在此处添加代码。

有趣的是，溢出一次在变更日志中显示了几次，曾经说它解决了“列表溢出无法正确呈现的问题”。（v 2.2.1）

Chrome v73（最新） Filepond最后更新时间：19/4/15

filepond_problem.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Filepond Problem</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="problem.css"> <!--remove this line and it works-->
    <link rel="stylesheet" type="text/css" href="filepond/dist/filepond.css">
    <script src="filepond/dist/filepond.js"></script>
</head>

<body>
<input type="file" mutliple/>
<script>
    // Get a reference to the file input element
    const inputElement = document.querySelector('input[type="file"]');
    // Create the FilePond instance
    const pond = FilePond.create(inputElement);
</script>
</body>
</html>

problem.css（在我伴侣的一个小文件中）

ul {
    overflow: hidden;
}

当我选择要上传的文件时，无论是拖放还是使用“浏览”对话框，它所做的只是删除“拖放文件或浏览”。它不显示我的文件，没有x删除它，什么也没有。它只是变成一个空的浅灰色框。

当您删除包含problem.css的行时，其作用如their site所示。好吧，减去缩略图，但这是预料之中的，因为我尚未启用它。

Answer 1

输入位于.filepond--drop-label中，根据输入的样式，上载文件时，会隐藏一些JavaScript。相同的javascript可能会显示照片，该照片位于下一个div .firepond--list-scroller中。照片和内容确实与所有图标一样都显示在列表中，因此现在它们已被隐藏。您说过接下来要制作照片部分，在这种情况下，您只是需要一起做，因为它们有相互影响的不同部分。

看着他们的ul .filepond--list，我看不到您所做的ul{overflow:hidden;}（在上传照片之前和之后）。因此，我不确定这是从哪里来的，这可能是您在不知不觉中添加的内容。不需要那行代码。

溢出：隐藏似乎会破坏文件池

1 个答案: