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

form 组件在layout为vertical时,修改表单项宽度异常 #7581

Open
1 task
hanyefeng opened this issue May 15, 2024 · 3 comments · May be fixed by #7582
Open
1 task

form 组件在layout为vertical时,修改表单项宽度异常 #7581

hanyefeng opened this issue May 15, 2024 · 3 comments · May be fixed by #7582

Comments

@hanyefeng
Copy link

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

Version

4.2.1

Environment

vue3.2.36

Reproduction link

Edit on CodeSandbox

Steps to reproduce

我在封装ant-design-vue时发现,在layout为vertical时 修改表单项宽度表现不太符合预期,
宽度变成了表单项宽度加上label宽度。

What is expected?

期望和ant-design一样,可以灵活修改表单项宽度

What is actually happening?

对比ant-design发现,ant-design-vue 的ant-form-item的子元素class名为ant-form-row 而不是ant-form-item-row,这样导致
.ant-form-vertical .ant-form-item-row { flex-direction: column } 样式丢失,子元素宽度会额外多一个label的宽度

@hanyefeng
Copy link
Author

image
ant-design-vue 是.ant-form-row

@hanyefeng
Copy link
Author

image
ant-design是.ant-form-item-row,带有flex-direction: column样式

@hanyefeng
Copy link
Author

image 应该是 class={`${prefixCls.value}-item-row`}

@selicens selicens linked a pull request May 15, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant