Reproduction link
Steps to reproduce
Drag to change the editor/demo screen size
Drag until the width is 1300, nothing happens
What is expected?
I expected that the layout 'lg' breakpoint follows the 1300px in the custom tokens defined in the ConfigProvider
<ConfigProvider
theme={{
token: {
screenLG: 1300,
screenLGMin: 200,
screenLGMax: 1300,
},
}}
>
What is actually happening?
The layout ignores the 1300px defined and defaults to 992px. When dragging to 992px the layout then correctly shrinks. However it should be shrinking at 1300px not 992px.
| Environment | Info |
| ------------ | ------------ |
| antd | 5.17.0 |
| React | 18.3.1 |
| System | Windows 11 |
| Browser | Chrome |
6条答案
按热度按时间x4shl7ld1#
Start a new pull request in StackBlitz Codeflow .
hs1ihplo2#
2024-05-11.20-23-30.mp4
Example video - The window starts at 1307px -> doesn't change at 1300px -> changes at 992px
x6492ojm3#
Refer to the default value of antd,
screenLGMin
should be the same asscreenLG
andscreenLGMax
should be larger thanscreenLG
3wabscal4#
2024-05-15.12-37-30.mp4
https://stackblitz.com/edit/react-cmczs9-znoxlu?file=demo.tsx
Refer to the default value of antd,
screenLGMin
should be the same asscreenLG
andscreenLGMax
should be larger thanscreenLG
@MadCcc thanks for taking a look. See new video and the new sample code with adjusted values - I've changed screenLGMin == screenLG == 1300, and screenLGMax == 1500 to be > screenLG as suggested.
The issue is still present, and the behavior did not change. The layout ignores the 1300px breakpoint that I've defined in config, and only uses the default 992px.
2q5ifsrm5#
Hi, just checking in as its been two weeks, I'm still experiencing this issue.
See repro at: https://stackblitz.com/edit/react-cmczs9-znoxlu?file=demo.tsx
fivyi3re6#
Hello, I would like to provide some additional context. I noticed the
Sider
component is calling on an internal static breakpoint map starting at this line:ant-design/components/layout/Sider.tsx
Line 13 in 1334831
| | constdimensionMaxMap={ |
Meanwhile, the
Grid.Row
component uses theresponsiveObserver
utils to follow any custom breakpoints defined in the theme: https://github.com/ant-design/ant-design/blob/master/components/grid/row.tsx . I believe that ifSider
is changed to useresponsiveObserver
andresponsiveArray
like howGrid.Row
component currently does, it would fix this issue.