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.Item labelAlign does not work #16067

Closed
joshuaavalon opened this issue Apr 14, 2019 · 5 comments

Comments

Projects
None yet
4 participants
@joshuaavalon
Copy link

commented Apr 14, 2019

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

Reproduction link

Edit on CodeSandbox

Steps to reproduce

<Form.Item label="label" labelAlign="right">
     item
</Form.Item>

What is expected?

Label align to left

What is actually happening?

Label still align to right.

Environment Info
antd 3.16.3
React 16.8.6
System Window 10
Browser Chrome

The third item is what to be expected with text-align: left;

Also, it works on <Form> but the type definition and documentation also said it is available on <Form.Item>.

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 14, 2019

图片

It works when you expand browser window width.

Form has a default responsive behavior that it will turn into vertical layout in small device width.

@afc163 afc163 closed this Apr 14, 2019

@joshuaavalon

This comment has been minimized.

Copy link
Author

commented Apr 14, 2019

@afc163 Please read the comment or code.

The third item is what to be expected with text-align: left;

<Form.Item label="label" labelAlign="left">
  a
</Form.Item>
<Form.Item label="label" labelAlign="right">
  a
</Form.Item>
<Form.Item label="label" className="align-left">
  a
</Form.Item>

The last item is correct because I apply CSS manually on it.

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 14, 2019

https://codesandbox.io/s/k3y5254l73

labelAlign is prop of Form, not Form.Item's.

CodeSandbox
The online code editor tailored for web applications
@joshuaavalon

This comment has been minimized.

Copy link
Author

commented Apr 14, 2019

export interface FormItemProps {
prefixCls?: string;
className?: string;
id?: string;
label?: React.ReactNode;
labelAlign?: 'left' | 'right';
labelCol?: ColProps;
wrapperCol?: ColProps;
help?: React.ReactNode;
extra?: React.ReactNode;
validateStatus?: (typeof ValidateStatuses)[number];
hasFeedback?: boolean;
required?: boolean;
style?: React.CSSProperties;
colon?: boolean;
}

See Line 22

@afc163 afc163 reopened this Apr 14, 2019

@afc163 afc163 added the 🐛 Bug label Apr 14, 2019

@afc163

This comment has been minimized.

Copy link
Member

commented Apr 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.