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,
screenLGMinshould be the same asscreenLGandscreenLGMaxshould be larger thanscreenLG3wabscal4#
2024-05-15.12-37-30.mp4
https://stackblitz.com/edit/react-cmczs9-znoxlu?file=demo.tsx
Refer to the default value of antd,
screenLGMinshould be the same asscreenLGandscreenLGMaxshould 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
Sidercomponent 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.Rowcomponent uses theresponsiveObserverutils 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 ifSideris changed to useresponsiveObserverandresponsiveArraylike howGrid.Rowcomponent currently does, it would fix this issue.