gpt4 book ai didi

html - 溢出 : hidden seems to break filepond

转载 作者:太空宇宙 更新时间:2023-11-04 06:18:19 25 4
gpt4 key购买 nike

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

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

我尝试使用 Chrome 的检查器功能查看运行时页面源代码,但在那里找不到溢出。

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

有趣的是,溢出在变更日志中出现了几次,有一次说它解决了“列表溢出无法正确呈现的问题”。 (2.2.1 版)

Chrome v73(最新)Filepond 最后更新于 2019 年 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 中描述的一样.嗯,减去缩略图,但这是预期的,因为我还没有启用它。

最佳答案

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

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

enter image description here

关于html - 溢出 : hidden seems to break filepond,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55751342/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com