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

fix(material/input): uncessary scroll bar on auto-resize textarea in some cases #21619

Merged
merged 1 commit into from
Feb 9, 2021

Conversation

crisbeto
Copy link
Member

It's common for apps to set box-sizing: border-box on all elements in the app which ends up causing unnecessary scroll bars on auto-resizing textareas. These changes explicitly set box-sizing: content-box to fix it.

Note that ideally we'd do this at the cdk/text-field level since it is the one responsible for resizing the textarea, but we generally try to avoid changing the user's layout through the CDK.

Fixes #21560.

…some cases

It's common for apps to set `box-sizing: border-box` on all elements in the app which ends
up causing unnecessary scroll bars on auto-resizing textareas. These changes explicitly
set `box-sizing: content-box` to fix it.

Note that ideally we'd do this at the `cdk/text-field` level since it is the one responsible
for resizing the textarea, but we generally try to avoid changing the user's layout through
the CDK.

Fixes angular#21560.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: patch This PR is targeted for the next patch release labels Jan 18, 2021
@crisbeto crisbeto requested a review from mmalerba as a code owner January 18, 2021 19:35
@google-cla google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 18, 2021
@crisbeto
Copy link
Member Author

Caretaker note: this has the potential of causing screenshot diffs. If that is the case, we should re-evaluate the fix.

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Jan 21, 2021
@mmalerba
Copy link
Contributor

Definitely willing to give the presubmit a try, but I feel like we've had a number of attempts to fix the scrollbars and the fixes always seem to fix the issue for half of people and cause it for the other half 😅

@annieyw annieyw merged commit 915791b into angular:master Feb 9, 2021
annieyw pushed a commit that referenced this pull request Feb 9, 2021
…some cases (#21619)

It's common for apps to set `box-sizing: border-box` on all elements in the app which ends
up causing unnecessary scroll bars on auto-resizing textareas. These changes explicitly
set `box-sizing: content-box` to fix it.

Note that ideally we'd do this at the `cdk/text-field` level since it is the one responsible
for resizing the textarea, but we generally try to avoid changing the user's layout through
the CDK.

Fixes #21560.

(cherry picked from commit 915791b)
annieyw pushed a commit that referenced this pull request Feb 9, 2021
…some cases (#21619)

It's common for apps to set `box-sizing: border-box` on all elements in the app which ends
up causing unnecessary scroll bars on auto-resizing textareas. These changes explicitly
set `box-sizing: content-box` to fix it.

Note that ideally we'd do this at the `cdk/text-field` level since it is the one responsible
for resizing the textarea, but we generally try to avoid changing the user's layout through
the CDK.

Fixes #21560.

(cherry picked from commit 915791b)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Multi line text area should work with box-sixing: border-box
3 participants