Skip to content

Dropdown height large scale text fix #107201

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
Merged
merged 1 commit into from
Jul 19, 2022
Merged

Dropdown height large scale text fix #107201

merged 1 commit into from
Jul 19, 2022

Conversation

foongsq
Copy link
Contributor

@foongsq foongsq commented Jul 7, 2022 •
edited
Loading

This PR fixes the problem where large scale text gets cut off in the dropdown button. The current calculation of height of the button only uses fontSize, which does not reflect the actual size of the text when a text scale factor of more than 1.0 is specified.

To fix this problem, I scaled the fontSize according to text scale, before using this new text size to calculate the button height.

Fixes #106359

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jul 7, 2022
@google-cla
Copy link

google-cla bot commented Jul 7, 2022

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@foongsq foongsq changed the title WIP - Dropdown height large scale text fix Dropdown height large scale text fix Jul 7, 2022
@foongsq foongsq marked this pull request as ready for review July 7, 2022 07:30
@HansMuller HansMuller requested a review from gspencergoog July 8, 2022 21:34
@gspencergoog
Copy link
Contributor

@foongsq This looks great. If you are able to accept the Contributor License Agreement (CLA), we can move forward with reviewing it.

Review the failure for more instructions on how to accept the CLA.

@foongsq
Copy link
Contributor Author

foongsq commented Jul 14, 2022

@gspencergoog I have already accepted the CLA, thanks

gspencergoog
gspencergoog approved these changes Jul 14, 2022
View reviewed changes
Copy link
Contributor

@gspencergoog gspencergoog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

32384589-a60f0e74-c078-11e7-9bc1-e5b5287aea9d

@jiahaog jiahaog added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 19, 2022
@auto-submit
Copy link
Contributor

auto-submit bot commented Jul 19, 2022

  • Please get at least one approved review if you are already a member or two member reviews if you are not a member before re-applying this label. Reviewers: If you left a comment approving, please use the "approve" review action instead.

@auto-submit
Copy link
Contributor

auto-submit bot commented Jul 19, 2022

Validations Fail.

@auto-submit auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 19, 2022
jiahaog
jiahaog approved these changes Jul 19, 2022
View reviewed changes
Copy link
Member

@jiahaog jiahaog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RSLGTM

@jiahaog jiahaog added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 19, 2022
@jiahaog
Copy link
Member

jiahaog commented Jul 19, 2022

Manually merging as discussed in the Flutter rollers chat.

@jiahaog jiahaog merged commit 74ac867 into flutter:master Jul 19, 2022
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jul 20, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 20, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
1b02e8f 
…large for dropdown button (flutter/flutter#107201)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jul 20, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 20, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
96ba365 
…large for dropdown button (flutter/flutter#107201)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jul 20, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 20, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
dd9fbe7 
…large for dropdown button (flutter/flutter#107201)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jul 20, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 20, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
942e251 
…large for dropdown button (flutter/flutter#107201)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jul 20, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 20, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
4172bb4 
…large for dropdown button (flutter/flutter#107201)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jul 20, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 20, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
04b01d9 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 22, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
b939611 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 22, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
e6ea619 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jul 22, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
c48eea9 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 23, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
d55b0cf 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 23, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
d80bdb0 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 24, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
95b8c95 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 24, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
5ff5f03 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
48ac150 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
79d7038 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
4e19d15 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
103f774 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
308d210 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
d0f6c59 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
302c925 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
2ea7380 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
fbd83d1 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
1cdb33c 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
3a75834 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
2c324ad 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
2130221 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
8e8c072 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
d607f91 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
78cb2ef 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
48b416c 
…large for dropdown button (flutter/flutter#107201)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022
@engine-flutter-autoroll
74ac867 Modify calculation of dense button height when text scale is …
a831986 
…large for dropdown button (flutter/flutter#107201)
camsim99 pushed a commit to camsim99/flutter that referenced this pull request Aug 10, 2022
@foongsq @camsim99
Modify calculation of dense button height when text scale is large fo…
eceee85 
…r dropdown button (flutter#107201)
@bleroux bleroux mentioned this pull request Dec 9, 2024
Merged
github-merge-queue bot pushed a commit that referenced this pull request Jan 23, 2025
@bleroux
Fix DropdownButtonFormField clips text when large text scale is used (#…
97ca57c 
…159975)

## Description

This PR fixes `DropdownButtonFormField` text being clipped when using a
large text scale.

Before:


![image](https://github.com/user-attachments/assets/6c4deed2-eb61-4c0a-912e-dba364013038)

After:


![image](https://github.com/user-attachments/assets/1dee5cda-9885-47c1-92a6-afbbc2312266)


This extend the fix from #107201
which does not work properly with Material 3 (because of
TextStyle.height being set for M3 default text styles).

## Related Issue

Fixes [DropdownButtonFormField clips text when large text scale is used
and useMaterial3 is
true](#159971)

## Tests

Adds 1 test.
Updates 1 test.
Wasmund1 pushed a commit to Wasmund1/flutter that referenced this pull request Jan 24, 2025
@bleroux
Fix DropdownButtonFormField clips text when large text scale is used (f…
794ee83 
…lutter#159975)

## Description

This PR fixes `DropdownButtonFormField` text being clipped when using a
large text scale.

Before:


![image](https://github.com/user-attachments/assets/6c4deed2-eb61-4c0a-912e-dba364013038)

After:


![image](https://github.com/user-attachments/assets/1dee5cda-9885-47c1-92a6-afbbc2312266)


This extend the fix from flutter#107201
which does not work properly with Material 3 (because of
TextStyle.height being set for M3 default text styles).

## Related Issue

Fixes [DropdownButtonFormField clips text when large text scale is used
and useMaterial3 is
true](flutter#159971)

## Tests

Adds 1 test.
Updates 1 test.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jiahaog jiahaog jiahaog approved these changes

@gspencergoog gspencergoog gspencergoog approved these changes

Assignees
No one assigned
Labels
autosubmit Merge PR when tree becomes green via auto submit App f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

DropdownButton and DropdownButtonFormField clips text when large text scale is used
3 participants
@foongsq @gspencergoog @jiahaog