New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layout sider 组件属性,collapsedWidth='40px'后, 样式不正确,伸缩不能正常使用 #10140

Closed
aibaiejoy opened this Issue Apr 18, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@aibaiejoy

aibaiejoy commented Apr 18, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.1

Environment

chrome,react,web

Reproduction link

Edit on CodeSandbox

Steps to reproduce

https://codesandbox.io/s/oqkp18o3xy

What is expected?

伸缩可以正常使用

What is actually happening?

伸缩不能正常使用

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Apr 18, 2018

Translation of this issue:


layout sider component properties, collapsedWidth='40px' style is incorrect, scaling does not work

  • [] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.1

Environment

Chrome,react,web

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Https://codesandbox.io/s/oqkp18o3xy

What is expected?

Scalability can be used normally

What is actually happening?

Expansion does not work properly

@aibaiejoy

This comment has been minimized.

aibaiejoy commented Apr 18, 2018

解决方案:

`
<Sider
collapsedWidth='40px'
width={this.state.collapsed ? '40px' : '200px'}
collapsible
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}

<div className="logo" />
<Menu
	style={{ width: this.state.collapsed ? 40 : 200 }}
>
</Menu>
`

但是会出现一个问题是,ant-layout-content上的flex:auto,会导致左侧导航不能按实际宽度显示,我修改成flex:1,可以解决

@afc163 afc163 closed this in 2078354 Apr 22, 2018

@afc163

This comment has been minimized.

Member

afc163 commented Apr 22, 2018

Fixed in 2078354

You can use this as workaround until next patch.

collapsedWidth="40px"
collapsedWidth={40}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment