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

Bug: Textarea font sizing seems incorrect with other form elements #109

Open
xjdesigns opened this issue Jun 10, 2020 · 4 comments
Open
Assignees
Labels

Comments

@xjdesigns
Copy link

xjdesigns commented Jun 10, 2020

With the new update to UI controls I am seeing an issue with text area. I have my own UI library I use and handle setting the font size for form controls.
When setting a font size for inputs and textarea elements the size is being incorrectly calculated. Upon inspecting the computed values show the same cascade but produce different results.
It appears to be some issue with the font family. When setting the font family to monospace which is default the size is affected.

Reproduce:
Visit bootstrap page. Inspect the text area in devtools.
https://getbootstrap.com/docs/4.5/components/forms/
Toggle the font-family inherit on an off inside the _reboot.scss file and you will notice the computed size changes.

Issue:
Setting input and text area to ".75rem" value produces different calculated values. Before the update to the new form controls this was not an issue.

Input element font size declaration produces a computed value based off the root size.
.75rem = 12px

Textarea element font size declaration produces a computed value based off the UA agent stying.
.75rem = 9.75px

@gregwhitworth
Copy link
Member

With the new update to UI controls I am seeing an issue with text area. I have my own UI library I use and handle setting the font size for form controls.

Thanks for filing the bug @xjdesigns - to clarify are you referring to the change to the Chromium based controls? Haven't had a chance to look at your issue yet but does this issue repro in Firefox/Safari assuming you are referring to the Chromium changes?

@gregwhitworth gregwhitworth self-assigned this Jun 11, 2020
@xjdesigns
Copy link
Author

@gregwhitworth Sorry for the delay.
Yes correct. When the new update rolled out with the new controls I noticed the issue. This issue is Chromium only. When inspecting with Safari and Firefox the issue is not present. I will verify on new edge with uses Chromium.
I am not able to validate with and older version of Chromium which did not have the issue but I think this would have been caught as well.

I have broke it down to the font family. I did implement a workaround for now by setting it to inherit but it was not needed previously.

Let me know if I can help.

@xjdesigns
Copy link
Author

I checked new Edge which uses Chromium and the latest has the same issue. From my understanding new Edge would have Open UI. Please correct me if I am wrong.

@github-actions
Copy link

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

@github-actions github-actions bot added the stale label Mar 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants