While adding support for Dynamic Font Scaling (Ionic v8) to my existing app, I’m struggling to override some scaling issues in UI elements where re-sizing is not helpful/desired or where it’s just too much.
For example, the primary menu button doesn’t really need to be resized to be huge. When it gets too big it takes up excessive vertical space, making the app content feel really messy and cramped. To fix this, I’ve just added some CSS to set min and max sizes.
ion-menu-button{
font-size: clamp(20px, 1.5rem, 36px) !important;
width:clamp(36px, 3rem, 48px) !important;
height:clamp(36px, 3rem, 48px) !important;
}
For whatever reason, this same approach doesn’t work as expected with the ion-back-button component. The screenshot below depicts unmodified scaling, which crowds out the title and other components in addition to having excessive padding.
It seems like every UI component is it’s own kind of puzzle in terms of figuring out why it scales poorly and how I can reduce unwanted side effects. (e.g. by setting min/max sizes, etc). This is in part because so many of the components use REMs for things like margins and padding, which is not always going to scale well when the base font is enormous.
Is there a standard way to override scaling on specific components? For example:
ion-back-button{
--ion-dynamic-font: initial; // tl;dr this does not work
}
