Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Font size doesn't change row height when fxLayout="column" and using Angular Material typography
See original GitHub issueBug Report
I’m havig an issue when using flex layout with Angular Material, specifically angular material where the “global Angular Material typography styles” have been set.
I am setting a specific font size for texts that is displayed in rows and the rows’ heights are not correctly calculated. They behave as if they had a standard font size instead of the bigger size.
More precisely, I have a project setup with Angular Material and the body has the “mat-typography” class.
<body class="mat-typography">
<my-app></my-app>
</body>
In an angular component’s html I have the following layout:
<div fxLayout="row">
<div fxLayout="column">
<div>Hello</div>
<div class="large">World</div>
</div>
<div fxFlex fxLayout="column">
<div>Hello</div>
<div class="large">World</div>
</div>
</div>
and css:
.large {
font-size: 4em;
}
What is the expected behavior?
We should have two “Hello World” text in two columns with a small hello and a big world, the text should not overflow.
Something like that:
What is the current behavior?
World ends up being written on top of hello:
What are the steps to reproduce?
Here’s a StackBlitz link for the issue: https://stackblitz.com/edit/angular-ivy-omaraf
What is the use-case or motivation for changing an existing behavior?
We should be able to use Flex layout with Angular Material global typography configured.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I could reproduce with 11, seemingly on all browsers.
Is there anything else we should know?
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@mackelito OK, fair enough, I’ll have to check if I can reproduce something similar removing this library from the equation…
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.