blocknative
[Question] Root html element font-size affects library offsets calculated in rem
Current Behavior
My web application has an overridden font size on HTML element, this affects the paddings and font size inside the shadow dom created by the library since the calculation of the size of the indents is specified through rem, which always relies on the value on the root element.
The library has the ability to override styles via css variables, so i can fix brocken paddings and font size by using em instead of rem, but there is some values that has no css variables. Can you provide more css variables in this library or suggest any other fix for that problem?
Expected Behavior
No response
Steps To Reproduce
No response
What package is effected by this issue?
@web3-onboard/react
Is this a build or a runtime issue?
Runtime, N/A
Package Version
2.9.0
Node Version
No response
What browsers are you seeing the problem on?
No response
Relevant log output
No response
Anything else?
No response
Sanity Check
- [X] If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.
@socaseinpoint Can you provide a code pen or link to a repo that demos the issue you're having?
https://github.com/socaseinpoint/demo_block_native_rem demo the issue
@socaseinpoint Is this what you are looking for? Let us know which styles there are missing that you need for you application.
this There are many css properties that are defined in rem, and that I can't customize by passing css-custom-properties
Examples: [packages/co](padding: 1rem;) https://github.com/blocknative/web3-onboard/blob/43c7d05e25baeeb7343cfc98a6bd7bc3e8417a3f/packages/core/src/views/connect/Index.svelte#L473
Hey @socaseinpoint can you apply your font-size to the body element instead of the root html element? This would be the easiest way to resolve on your end.
Rem units allow you to set sizes relative to the root element. As I understand it's only possible to define font size for rem calculation
I have tried, and it's impossible to get this to work as expected without changing the font-size outside of the web component, it would have been an easy fix if they did keep consistency throughout their whole component by using css variables, but I found 153 cases where they hardcoded a rem value.
a rewrite to pixel would be best in this case.
Is there any progress on this issue? The style is disordered and cannot be used on the mobile end
