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.

Sign up for GitHub

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

Jump to bottom

bug(mat-form-field): 'cols' attribute of <textarea> does not work with mat-form-field #29459

Closed
coralie6626 opened this issue Jul 19, 2024 · 2 comments · Fixed by #29836
Closed

bug(mat-form-field): 'cols' attribute of <textarea> does not work with mat-form-field #29459

coralie6626 opened this issue Jul 19, 2024 · 2 comments · Fixed by #29836
Labels
area: material/form-field P4 A relatively minor issue that is not relevant to core functions

Comments

@coralie6626
Copy link

coralie6626 commented Jul 19, 2024 •
edited
Loading

Description

When using to wrap a <textarea>, setting a value for 'cols' attribute does not change the width of the <textarea>. This caused some consistency issues since the 'rows' attribute (which is used to set the height of <textarea>) still working as intended.

Reproduction

StackBlitz link: StackBlitz Example
Steps to reproduce:

  1. wrap <textarea> with mat-form-field
  2. change cols attribute value

Expected Behavior

The visible width of the <textarea> should be set according to the value of 'cols'.

Actual Behavior

Modifying 'cols' attribute value does not have any effect on the width of the <textarea>.

Environment

  • Angular: ^18.0.0
  • CDK/Material: ^18.0.0
  • Browser(s): Google Chrome 126.0.6478.128 (Official Build) (64-bit)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
@coralie6626 coralie6626 added the needs triage This issue needs to be triaged by the team label Jul 19, 2024
@jullierme
Copy link
Contributor

During my brief investigation, I found out that there is a CSS class mat-mdc-form-field-infix which sets a fixed width of 180px. Consequently, the width of the <textarea> is not automatically adjusted based on the cols attribute. If this behaviour is seen as a problem, I can try to fix it.

@coralie6626
Copy link
Author

@jullierme Thank you for your response. I managed to find a workaround for my issue based on your comment.
By changing this css property, the cols attribute now have effect on the width of the mat-form-field.
mat-form-field .mat-mdc-form-field-infix { width: auto; }
However, I did noticed that the width property of mat-mdc-form-field-infix class does not have any major effect. The base width of mat-form-field is only slightly changed. I think it is still necessary to fix this.

@mmalerba mmalerba added P4 A relatively minor issue that is not relevant to core functions area: material/form-field and removed needs triage This issue needs to be triaged by the team labels Aug 6, 2024
naaajii added a commit to naaajii/components that referenced this issue Oct 6, 2024
@naaajii
fix(material/form-field): account in cols attribute on textarea
7e7d5f6 
previously we were setting width of 180px on our input field however this also made that textarea width stays the same if they are used with `cols` attribute, this commit ensures we dont do that if we have a textarea with `cols` attribute allowing it to grow in width as much as the attribute wants it to

fixes angular#29459
@naaajii naaajii mentioned this issue Oct 6, 2024
Merged
naaajii added a commit to naaajii/components that referenced this issue Oct 6, 2024
@naaajii
fix(material/form-field): account in cols attribute on textarea
5b23f3e 
previously we were setting width of 180px on our input field however this also made that textarea width stays the same if they are used with `cols` attribute, this commit ensures we dont do that if we have a textarea with `cols` attribute allowing it to grow in width as much as the attribute wants it to

fixes angular#29459
naaajii added a commit to naaajii/components that referenced this issue Oct 8, 2024
@naaajii
fix(material/form-field): account in cols attribute on textarea
b140257 
previously we were setting width of 180px on our input field however this also made that textarea width stays the same if they are used with `cols` attribute, this commit ensures we dont do that if we have a textarea with `cols` attribute allowing it to grow in width as much as the attribute wants it to

fixes angular#29459
crisbeto pushed a commit that referenced this issue Oct 10, 2024
@naaajii
fix(material/form-field): account in cols attribute on textarea (#2…
48b2680 
…9836)

previously we were setting width of 180px on our input field however this also made that textarea width stays the same if they are used with `cols` attribute, this commit ensures we dont do that if we have a textarea with `cols` attribute allowing it to grow in width as much as the attribute wants it to

fixes #29459
crisbeto pushed a commit that referenced this issue Oct 10, 2024
@naaajii @crisbeto
fix(material/form-field): account in cols attribute on textarea (#2…
ddb55e2 
…9836)

previously we were setting width of 180px on our input field however this also made that textarea width stays the same if they are used with `cols` attribute, this commit ensures we dont do that if we have a textarea with `cols` attribute allowing it to grow in width as much as the attribute wants it to

fixes #29459

(cherry picked from commit 48b2680)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/form-field P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/form-field): account in cols attribute on textarea naaajii/components
3 participants
@jullierme @mmalerba @coralie6626