How can I remove extra height at the bottom of text in android: - IONIC4*

[rajashekarra]

Hi All,

I have encountered with a weird issue with ionic4 framework. Ionic4 is adding extra height at the bottom of the text in Android, where as on iOS the above and below height is same.

Below is sample code
< ion-label id=“newactivity” class=“recent-header activity-label” >New ACTIVITY</ ion-label >

Not only on ion-label but where ever I have text in the app, the extra space/height is being added at the bottom on Android app.

[the above image is when am debugging in chrome]

If you observe very closely the text is not center aligned ON ANDROID, ( which works fine in iOS*)
No padding or margin is applied. only text-align center is applied,

To make the text to appear CENTER on android, I have to add 2px extra padding on top of every text element.

I hate to add padding on each and every element like this,

Really appreciate if you can suggest me to make it work.

Note: There is nothing to do with CSS (like flex,justify, line height etc), the extra height is added at bottom on ANDROID. on the text itself.

To understand the issue, inspect any ionic app on android and hover on text (don’t apply any css property or padding and closely check above and below height of the text)

Related observations and solutions are much appreciated.

Thank you

[Meetallo]

Same issue. Any solution?

[Daveshirman]

I gave up trying to fix this. I pinpointed the problem down to pixel density differences between different android models, by using several emulators e.g. Samsung S8, Pixel 2, 3a, 4XL etc.

In the end, I simply added some CSS media queries that worked for different screen densities, changing the font size by 1 or 2px so it looked centred vertically.

[msamyashash]

still having the same issue with Ionic 7.
It really shows with small spaces like this example