fix: DatePicker über Tabellenkopf anzeigen durch z-index und Portal-Lösung

- react-datepicker auf portalId 'root-portal' umgestellt
- CSS-Klasse 'custom-datepicker-popper' mit z-index: 9999 in globals.css ergänzt
- Problem behoben, dass DatePicker hinter dem sticky Tabellen-Header verborgen war
- Tailwind-Konfiguration um z-[60,70] erweitert, wenn nötig
This commit is contained in:
ISA
2025-07-07 11:28:56 +02:00
parent b58c961da4
commit ba690c1e03
8 changed files with 26 additions and 5 deletions

View File

@@ -28,6 +28,8 @@ const DateRangePickerMeldungen: React.FC<Props> = ({
<div className="flex items-center space-x-2">
<label className="text-sm font-semibold">Von</label>
<DatePicker
portalId="root-portal" // beliebige ID
popperClassName="custom-datepicker-popper"
selected={parseISO(fromDate)}
onChange={(date) => date && setFromDate(formatDate(date))}
selectsStart
@@ -42,6 +44,8 @@ const DateRangePickerMeldungen: React.FC<Props> = ({
<div className="flex items-center space-x-2">
<label className="text-sm font-semibold">Bis</label>
<DatePicker
portalId="root-portal" // beliebige ID
popperClassName="custom-datepicker-popper"
selected={parseISO(toDate)}
onChange={(date) => date && setToDate(formatDate(date))}
selectsEnd