Skip to content
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
light-1986 opened this issue Apr 18, 2018 · 3 comments

Comments

@light-1986
Copy link

@light-1986 light-1986 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
Copy link
Contributor

@ant-design-bot 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

@light-1986
Copy link
Author

@light-1986 light-1986 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
Copy link
Member

@afc163 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
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants