Переполнение: кажется, что скрытый файл не работает

Я пытаюсь заставить Filepond работать, но эта единственная строка в моем CSS, кажется, нарушает его - overflow: hidden; в селекторе ul.

Я пробовал уничтожать целые разделы своей страницы, пока Filepond не заработал, остановился на CSS и, наконец, на вышеупомянутой строке в ul {}. Я могу стереть все остальное, оставив только эту строку, а Filepond все еще не работает, поэтому я уверен, что это какая-то проблема, но я понятия не имею, как это сделать.

Я попытался использовать функцию Chrome Inspector, чтобы посмотреть на исходный код страницы времени выполнения, и не смог найти там переполнения.

Затем я использовал функцию поиска в файлах Notepad ++ для тщательного поиска файлов Filepond на предмет «переполнения», но не смог найти его вместе с ul. Самое близкое, что я смог найти, это список с именем const в файле JS. Почему-то я не думаю, что это связано, но не знаю почему. Если потребуется, добавлю здесь код.

Интересно, что переполнение появляется пару раз в журнале изменений, один раз сообщая, что исправлена ​​«проблема, из-за которой переполнение списка не отображалось правильно». (версия 2.2.1)

Chrome v73 (последняя версия) Filepond последнее обновление 15.04.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>

проблема.css (в небольшом файле от моего партнера)

ul {
    overflow: hidden;
}

Когда я выбираю файл для загрузки, перетаскивая его или используя диалоговое окно «Обзор», все, что он делает, это удаляет «перетаскивание файлов или просмотр». Он не показывает мой файл, нет x, чтобы его удалить, ничего. Он просто превращается в пустую светло-серую коробку.

Когда вы удаляете строку, содержащую файл problem.css, он действует так, как показано на их сайте . Ну, без миниатюры, но это ожидаемо, поскольку я еще не включил это.


html css filepond
person donutguy640    schedule 18.04.2019    source источник
comment
ul {overflow: hidden}, как это подразумевает, скрывает все содержимое, выходящее за пределы элемента, в этом случае Filepond имеет элемент ul на панели, которая показывает файлы; если вы используете это правило, вы скрываете весь контент от всех ul элементов, если вы перейдете на их сайт, выберете тот же элемент и добавите то же правило, произойдет то же самое, поэтому решение состоит в том, чтобы либо избежать использования этого правила css , или, если быть более конкретным, с классами   -  person IvanS95    schedule 18.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Входные данные расположены в .filepond--drop-label и в зависимости от добавленных к нему стилей, когда вы загружаете файл, выполняется какой-то javascript, который его скрывает. Тот же самый javascript, вероятно, показывает фотографию, которая находится в следующем div, .firepond--list-scroller. Фотография и контент отображаются в списке, как и все значки, поэтому пока они скрыты. Вы сказали, что сделаете фото следующей, ну, в этом случае вам просто нужно сделать все вместе, поскольку у них есть разные части, которые влияют друг на друга.

Глядя на их ul .filepond--list, я не вижу того ul{overflow:hidden;}, что вы делаете (до и после загрузки фотографии). Так что я не уверен, откуда это взялось, это может быть что-то, что вы неосознанно добавили. Эта строка кода не нужна.

введите здесь описание изображения

person Sensoray    schedule 18.04.2019
comment
ммм, нет, бит ul {overflow: hidden;} был взят из нашего собственного CSS, а не из Filepond, извините. Однако я бы не стал снимать его, если смогу. - person donutguy640; 18.04.2019
comment
если вы не хотите удалять правило ul {overflow: hidden}, которое есть в вашем пользовательском CSS, попробуйте придать ему более конкретную специфику, например, ul.my_class {overflow: hidden}, чтобы оно только влияло на элементы ul, которые имеют класс my_class , таким образом ни один из элементов Filepond не будет затронут - person IvanS95; 18.04.2019
comment
Подойдет, как только я смогу схватить своего партнера, чтобы понять, для чего он там, для начала. Я никогда не был хорош в CSS, но я просто попробовал overflow: visible в паре селекторов .filepond - list, которые ничего не сделали. Я так понимаю ul более специфичен, чем классы? - person donutguy640; 18.04.2019
comment
Нет, просто ul менее специфичен, поэтому применяется к большему количеству элементов, в данном случае ко всем ul элементам, независимо от того, имеют ли они класс или идентификатор и т. Д .; он будет применяться ко всем из них ... если вы используете класс, вы более конкретны, если вы используете тег элемента плюс класс (например, ul.my_class), он еще более конкретен, поскольку вы говорите, что правило применяется только к элементам ul, у которых есть класс my_class - person IvanS95; 18.04.2019
comment
Да, я так и думал, но когда я добавил overflow: visible в filepond - list {}, он все равно сломался. Я попробовал то же самое только сейчас, и теперь это работает, лол ... иди, то, что я пропустил в первый раз, но спасибо. - person donutguy640; 18.04.2019