Skip to content

Multi line text area should work with box-sixing: border-box #21560

Closed
@yringler

Description

@yringler

It is very common to apply box-sizing: border box globally ( I happen to have gotten it from tachyons.
When a text area uses border-box, the cdkTextareaAutosize directive doesn't calculate correctly, and a scroll bar apears (and some content in the text area is cut off.
Because border-box is so common, I think it would be reasonable to allow cdkTextareaAutosize to be compatible with it - a single call to getcomputedstyle would be enough to know what is in use (the return value can be cached), and - I think it would be a simple thing to do? Maybe maybe I would make a PR... maybe.
But is that something which this project is interested in?

Original Post following:

Guys seems like I figured out what is the problem... Just try to set box-sizing: content-box to textarea element and everything goes well then. Recalculation doesn't take into account box-sizing: border-box.

Originally posted by @Mike--S in #13161 (comment)

Other post, emphasis added

@Mike--S that fix doesn't work for me.

I'll just hide the overflow until the problem is fixed.

As for box-sizing - it was a specific problem on my project, because every element has default style box-sizing: border box. I think this is very frequent case.
As for you, I guess you have increased font scaling on operating system level. I can reproduce this bug on stackblitz with 125% font size, but when I apply 100% font size bug is not reproduced with latest chrome, win 10.

Originally posted by @Mike--S in #13161 (comment)

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/text-field

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions