ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

bug: stacked label line height causes letters like j, g, and p to be cut off #20150

Open bkarv opened 4 years ago

bkarv commented 4 years ago

Ionic version: 4.11.7

I'm submitting a ... [X] bug report

Current behavior: For ion-item with a stacked ion-label with ion-input or ion-textarea, the characters 'jgp' are cutoff at the bottom. I am using latest version of chrome on MacOs and it is in MD mode. Seems to be ok if I slightly zoom in or out but default 100% view these characters are cutoff. See image below where at pink highlight:

stacked_label_cutoff stacked_label_cutoff_closeup

Expected behavior: All stacked characters should be shown in full.

Steps to reproduce:

 <ion-item>
   <ion-label position="stacked">
     Caption - Check 'jjggpp' Cut Off
   </ion-label>                     
   <ion-input [value]="'Some Text Goes Here'"></ion-input>
</ion-item>

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.802.2
   @angular-devkit/schematics    : 8.3.21
   @angular/cli                  : 8.3.21
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, browser 5.0.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 9 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.9.1
   NodeJS     : v10.10.0 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Mojave
daveshirman commented 4 years ago

How is this still an issue? It's the most basic thing that should work out the box!

Anyone from the Ionic team care to comment here? Ionic 4 is a year old and this shouldn't be a thing.

@mlynch @mhartington

mhartington commented 4 years ago

Hey there! Thanks for bringing this to our attention. We'd gladly accept a pull request if you'd like to get this resolved faster 😄

Otherwise we'll review this and add it to our sprint. Thanks for reporting this @bkarv

realityfilter commented 2 years ago

This is still an issue with ionic 6. Has anybody a workaround?

CodewindOnGithub commented 1 year ago

you can fix it with css using line-height: normal;