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
1 task done
joshuaavalon opened this issue Apr 14, 2019 · 10 comments
Closed
1 task done

Form.Item labelAlign does not work #16067

joshuaavalon opened this issue Apr 14, 2019 · 10 comments

Comments

@joshuaavalon
Copy link

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

@afc163 afc163 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.

Loading

@afc163 afc163 closed this Apr 14, 2019
@joshuaavalon
Copy link
Author

@joshuaavalon joshuaavalon 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.

Loading

@afc163
Copy link
Member

@afc163 afc163 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

Loading

@joshuaavalon
Copy link
Author

@joshuaavalon joshuaavalon 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

Loading

@afc163 afc163 reopened this Apr 14, 2019
@afc163
Copy link
Member

@afc163 afc163 commented Apr 14, 2019

Loading

@eggachecat
Copy link

@eggachecat eggachecat commented Sep 22, 2020

图片

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.

And is there an easy way for users to disable/overwrite this responsive behavior?

Loading

@seven4x
Copy link

@seven4x seven4x commented Nov 4, 2020

Loading

@nichitapasecinic
Copy link

@nichitapasecinic nichitapasecinic commented Feb 22, 2021

still not working !!!!

Loading

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Feb 24, 2021

Feel free to open a new issue please.

Loading

@Makentosh
Copy link

@Makentosh Makentosh commented Sep 1, 2021

still not working, from Form & Form.item too

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

9 participants