GitHub user FrancescoCastaldi added a comment to the discussion: Superset 6.1.0
– Date Range filter calendar is clipped/overflowing at 100% browser zoom
This clipping issue in Superset 6.1.0 occurs because of the transition to Ant
Design 5 for Native Filters.
### Root Cause
In `superset-frontend/src/dashboard/components/nativeFilters/FilterBar`, the
filter sidebar container has `overflow-y: auto` (or `overflow-x: hidden`). The
Ant Design `RangePicker` popup renders inside this container when its
`getPopupContainer` prop is tied to the local trigger node instead of
`document.body`. At 100% browser zoom, the calendar overlay width and height
exceed the visible filter drawer boundaries and are clipped by the parent
container overflow. At 75% zoom, the relative viewport dimensions scale down
enough to fit within the visible box.
### Solution 1: Global CSS Override (No Code Rebuild)
You can fix this across all dashboards without modifying individual dashboards
by injecting CSS into the application layout.
If using a custom theme or injecting custom CSS in `superset_config.py`:
```css
/* Ensure the Ant Design date picker dropdown renders above dashboard elements
*/
.ant-picker-dropdown {
z-index: 1060 !important;
position: fixed !important;
}
/* Allow the filter bar popover container to overflow cleanly */
.filter-bar-container,
.native-filters-sidebar {
overflow: visible !important;
}
```
### Solution 2: Frontend Component Fix (for Docker Image Rebuilds)
If you rebuild the Superset frontend image, navigate to:
`superset-frontend/plugins/plugin-chart-table/src` or
`superset-frontend/src/filters/components/Time/index.tsx` (and
`DateFilterPlugin.tsx`).
Ensure the `RangePicker` component specifies:
```tsx
<RangePicker
getPopupContainer={() => document.body}
dropdownAlign={{
points: ['tl', 'bl'],
offset: [0, 4],
overflow: { adjustX: true, adjustY: true },
}}
{...otherProps}
/>
```
Using `document.body` as the popup container portals the calendar dropdown out
of the sidebar DOM hierarchy, preventing any overflow clipping regardless of
browser zoom level.
GitHub link:
https://github.com/apache/superset/discussions/43894#discussioncomment-19164456
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
