From 5b23f3e79fbe5d3817c11dc8cd9ef0fc87ad989f Mon Sep 17 00:00:00 2001 From: naaajii Date: Sun, 6 Oct 2024 20:25:59 +0500 Subject: [PATCH] fix(material/form-field): account in `cols` attribute on textarea 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 --- src/material/form-field/form-field.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss index d796ecb06e1a..ab428ee3df93 100644 --- a/src/material/form-field/form-field.scss +++ b/src/material/form-field/form-field.scss @@ -179,10 +179,14 @@ $_icon-prefix-infix-padding: 4px; flex: auto; min-width: 0; - // Infix stretches to fit the container, but naturally wants to be this wide. We set - // this in order to have a consistent natural size for the various types of controls - // that can go in a form field. - width: 180px; + // We do not to set fixed width on textarea with cols attribute as it makes different columns + // attribute look same width. + :has(:not(textarea[cols])) { + // Infix stretches to fit the container, but naturally wants to be this wide. We set + // this in order to have a consistent natural size for the various types of controls + // that can go in a form field. + width: 180px; + } // Needed so that the floating label does not overlap with prefixes or suffixes. position: relative;