Переполнение: скрытый, кажется, нарушает filepond - PullRequest
Новая
       13

Переполнение: скрытый, кажется, нарушает filepond

0 голосов
/ 18 апреля 2019

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

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

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

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

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

Chrome v73 (актуальный) Filepond последний раз обновлялся 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 (в небольшом файле от моего партнера) 

ul {
    overflow: hidden;
}

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

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

1 Ответ

1 голос
/ 18 апреля 2019

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

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

enter image description here

...