0

我试图让 Filepond 工作，但我的 CSS 中的这一行似乎打破了它 -overflow: hidden;在 ul 选择器中。

我尝试对页面的整个部分进行核对，直到 Filepond 工作，将 css 归零，最后是 ul {} 中的上述行。我可以清除其他所有内容，只留下那条线，而且 Filepond 仍然坏掉，所以我确定这是问题所在，但我不知道如何解决。

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

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

有趣的是，溢出在更新日志中出现了几次，曾经说过它修复了“列表溢出无法正确呈现的问题”。(v 2.2.1)

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

文件池问题.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>

问题.css（在我合作伙伴的一个小文件中）

ul {
    overflow: hidden;
}

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

当您删除包含 question.css 的行时，它的行为就像他们网站上所描绘的那样。好吧，减去缩略图，但这是意料之中的，因为我还没有启用它。

4

1 回答 1

1

输入位于.filepond--drop-label并基于附加到它的样式，当您上传文件时，有一些 javascript 正在隐藏它。相同的 javascript 可能会显示位于下一个 div 中的照片.firepond--list-scroller。照片和内容确实出现在列表中，所有图标也是如此，所以现在它们是隐藏的。你说你接下来会做照片部分，好吧，在这种情况下，你只需要一起做，因为它们有不同的部分相互影响。

查看他们的 ul .filepond--list，我看不到ul{overflow:hidden;}您所做的（在上传照片之前和之后）。所以我不确定它来自哪里，它可能是你在不知不觉中添加的东西。不需要那行代码。

在此处输入图像描述

于 2019-04-18T18:05:43.700 回答