gpt4 book ai didi

css - 我在 react-datepicker 位置上遇到问题

转载 作者:行者123 更新时间:2023-12-04 15:58:03 37 4
gpt4 key购买 nike

我正在使用 react-datepicker 但由于某种原因它在容器后面显示日历。
enter image description here
我试过了:

.react-datepicker-popper {
z-index: 9999 !important;
}
但它不起作用。
这是日期选择器组件
<DatePicker
selected={startDateSingleDay}
onChange={onChangeDatePickerStartDateSingleDay}
dateFormat="yyyy-MM-dd"
className="text-center"
showMonthDropdown
showYearDropdown
dropdownMode="select"
onChangeRaw={handleDateChangeRaw}
popperClassName="date-picker-reports"
placeholderText="Choose a date"
/>
有什么建议?

最佳答案

我修复了它,因为 react-popper 会将 popover 放置在与
父级对于父 div 受到某种限制的情况——a
可滚动的 div -- popper 将出现在 div 内,并且将是
受其约束。
在我的情况下,我希望弹出框不受约束
parent 。为了解决这个问题,我把popover放在外面的容器里
受约束的容器。

import { Portal } from "react-overlays";

const CalendarContainer = ({ children }) => {
const el = document.getElementById("calendar-portal");

return <Portal container={el}>{children}</Portal>;
};
并将 popperContainer Prop 添加到 DatePicker 中,如下所示:
<DatePicker
selected={startDate}
onChange={onChangeDatePickerStartDate}
dateFormat="yyyy-MM-dd"
className="text-center date-picker-reports"
showMonthDropdown
showYearDropdown
dropdownMode="select"
onChangeRaw={handleDateChangeRaw}
popperPlacement="top-start"
placeholderText="Choose a start date"
popperContainer={CalendarContainer}
/>
最后结果:
enter image description here

关于css - 我在 react-datepicker 位置上遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64882223/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com