Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bkarv opened this issue Jan 7, 2020 · 4 comments
Open
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@bkarv
Copy link

bkarv commented Jan 7, 2020

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
@ionitron-bot ionitron-bot bot added the triage label Jan 7, 2020
@daveshirman
Copy link

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
Copy link
Member

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

@liamdebeasi liamdebeasi changed the title Ionic 4.11.7 - ion-item stacked ion-label text is cutoff bug: stacked label line height causes letters like j, g, and p to be cut off Sep 16, 2021
@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Sep 16, 2021
@realityfilter
Copy link

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

@CodewindOnGithub
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

No branches or pull requests

6 participants