首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >溢出:隐藏似乎会中断filepond

溢出:隐藏似乎会中断filepond
EN

Stack Overflow用户
提问于 2019-04-19 01:50:32
回答 1查看 480关注 0票数 0

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

我尝试对页面的整个部分进行the操作,直到Filepond起作用,将焦点放在css上,最后在ul {}中找到前面提到的那一行。我可以删除所有其他的东西,只留下这一行,Filepond仍然是坏的,所以我确定这是某种程度上的问题,但我不知道是怎么回事。

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

然后我使用了Notepad++的搜索文件功能来彻底搜索Filepond文件中的"overflow“,但是找不到它与ul的结合。我能得到的最接近的是JS文件中的const命名列表。不知何故,我不认为这是相关的,但我知道为什么。如果需要的话,我会在这里添加它的代码。

有趣的是,overflow在changelog中出现了几次,曾经说过它修复了一个“列表溢出不能正确呈现的问题”。(v 2.2.1)

Chrome v73 (最新版本) Filepond最近更新时间: 4/15/19

filepond_problem.html

代码语言:javascript
复制
<!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 (在我的合作伙伴的一个小文件中)

代码语言:javascript
复制
ul {
    overflow: hidden;
}

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

当您删除包含problem.css的行时,它的行为与their site上所描绘的一样。好吧,减去缩略图,但这是预期的,因为我还没有启用它。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-19 02:05:44

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

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55751342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档