Overflow: hidden seems to break filepond

Question

I'm trying to get Filepond working, but this one line in my CSS seems to break it - overflow: hidden; within a ul selector.

I tried nuking entire sections of my page until Filepond worked, zeroed in on the css, and finally the aforementioned line within ul {}. I can wipe out everything else, leaving only that line, and Filepond's still broken, so I'm certain it's somehow the problem, but I don't have a clue how.

I tried using Chrome's Inspector feature to look at the run-time page source, and couldn't find overflow there.

Then I used Notepad++'s search-in-files function to thoroughly search the Filepond files for "overflow" but couldn't find it in conjunction with ul. The closest I could get was a const named list in the JS file. Somehow, I don't think that's related, but idk why. Will add the code for it here if requested.

Interestingly, overflow shows up a couple times in the changelog, once saying it fixed a "problem where list overflow would not render correctly." (v 2.2.1)

Chrome v73 (up to date) Filepond last updated 4/15/19

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 (in a small file from my partner)

ul {
    overflow: hidden;
}

When I choose a file to upload, whether drag/dropping, or using the Browse dialog box, all it does is removes "drag & drop your files or browse." It doesn't show my file, no x to remove it, nothing. It just becomes an empty, light grey box.

When you remove the line including problem.css, it acts as portrayed on their site. Well, minus the thumbnail, but that's expected, as I haven't enabled that yet.

`ul {overflow: hidden}`, as it implies, hides all content overflowing the element, in this case, Filepond has a `ul` element on the panel that shows the files; if you use that rule you are hiding all content from all `ul` elements, if you go their site, and select that same element and add the same rule, the same thing will happen, so the solution is just to either avoid using that css rule, or being more specific with classes — IvanS95, Apr 18 '19 at 18:21

score 1 · Accepted Answer · answered Apr 18 '19 at 18:05

1

The input is located in .filepond--drop-label and based on the styles appended to it, when you upload a file, there is some javascript going on that hides it. The same javascript probably shows the photo, which is in the next div, .firepond--list-scroller. The photo and content do appear in a list, as does all the icons, so for now they are hidden. You said you'd do the photo part next, well, in this case you just kind of need to do it all together as they have different pieces that effect each other.

Looking at their ul .filepond--list, I don't see the ul{overflow:hidden;} that you do (before and after uploading a photo). So I'm not sure where that is coming from, it might be something you unknowingly added. That line of code is not needed.

answered Apr 18 '19 at 18:05

Sensoray

2,360
2
18
27

mmm, no, the ul{overflow:hidden;} bit was from our own CSS, not Filepond's, sorry. I'd like to avoid removing it if I can, though. – donutguy640 Apr 18 '19 at 18:14
if you don't want to remove the `ul {overflow: hidden}` rule you have in your custom CSS, then try to give it more specificity, something like `ul.my_class {overflow: hidden}`, so that it *only* affects the `ul` elements that have the `my_class` class, that way none of Filepond's elements will be affected – IvanS95 Apr 18 '19 at 18:25
Will do, once I can get a hold of my partner to figure out what it's there for to begin with. I never was much good at CSS, but I just tried overflow: visible on a couple of the .filepond--list selectors, which did nothing. I take it ul is more specific than classes? – donutguy640 Apr 18 '19 at 18:42
1

No, just `ul` is less specific, thus, applies to more elements, in this case, to **all** `ul` elements, no matter if they have a class or id, etc; it will apply to all of them... if you use a class, you are being more specific, if you use an element tag plus a class (e.g `ul.my_class`) its even more specific, since you tell the rule to only apply to elements `ul`, that have a class `my_class` – IvanS95 Apr 18 '19 at 18:51
Yeah, that's what I thought, but when I added overflow: visible to filepond--list {} it was still broke. I tried the same again just now though, and now it works, lol...idk what I missed the first time, but thank you. – donutguy640 Apr 18 '19 at 20:13

Overflow: hidden seems to break filepond

1 Answers1