В зависимости от того, где я поместил компонент выбора или любой компонент, использующий всплывающее окно, внизу страницы создается ненужное пустое пространство. Выбор находится внутри элемента div, который имеет собственный набор переполнения y, и я хочу, чтобы всплывающее окно выбора можно было прокручивать с помощью этого компонента div. Это сложно описать словами, поэтому я также опубликую изображение.
перед всплывающим окном после всплывающее окно
Как сделать так, чтобы всплывающее окно опускалось с помощью элемента div с пользовательской полосой прокрутки, а не только страницы в целом?
Я попробовал изменить стиль элемента Select сам компонент, а также максимальную высоту, и хотя это работает, мне не нравится, как выглядит всплывающее окно, потому что оно такое маленькое.
Вот компонент выбора, который я использую, вот их несколько внутри формы, и все они функционируют примерно одинаково:
Код: Выделить всё
(
Start Hour
{hourArray.map((hour) => {
return (
{hour}
);
})}
)}
/>
Вот стиль элемента div, на который он влияет:
Код: Выделить всё
.common-container {
@apply flex flex-col flex-1 items-center gap-10 overflow-y-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;
Эта проблема возникает только тогда, когда страница заполнена элементами, поэтому вы, вероятно, ничего не заметите, если протестируете только один из эти выбирают. У меня есть нижняя панель, которая прикрепляется к нижней части страницы, и когда вы прокручиваете ее до конца, под нижней панелью остается только дополнительное пространство, мне нужно либо настроить нижнюю панель, чтобы она оставалась ниже этого пробела, либо для содержимого div. для расширения, когда выбранный компонент опускается.
Подробнее здесь:
https://stackoverflow.com/questions/789 ... om-of-page
Мобильная версия