Stacked labels always center content

[jmontana]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v8.12.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS High Sierra

Describe the Bug
When using position="stacked" on an ion-label, the content beneath will always be centered.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create new blank Ionic 4 project.
2. Add an ion-item a stacked ion-label and content.
3. The label will be properly stacked, but the content is horizontally centered.

Related Code
If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior
I would expect the text would be left-justified by default.

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[brandyscarney]

Thanks for the issue! This is something that I believe item has done for awhile now. It has align-items: center on the native item. Did you just start seeing this recently? Generally a stacked label is meant to be used with an input, like the following:

I'm not sure of your markup, but if you're using something like a div you can style it using the following:

<ion-item>
  <ion-label position="stacked">Testing</ion-label>
  <div style="align-self: start">Some content</div>
</ion-item>

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#741

[brandyscarney]

Sorry the issue was mistaken as a v3 issue. Reopened. 🙂

[jmontana]

Sometimes we have to display data in a read-only format, so an input doesn't make a lot of sense. I was expecting I could do something like

<ion-item>
  <ion-label position="stacked">First Name</ion-label>
  <div>{{person.firstName}}</div>
</ion-item>

But that gets centered. The align-self workaround above does work.

[brandyscarney]

I'll have to look into seeing if there's an easy way for us to do this without breaking the standard items. The issue is if I change the alignment of an item by default to start then it will break the list items:

align-items: center:

align-items: start:

I think the solution here (in Ionic) is to change the alignment for stacked/floating items like this:

.item-label-stacked,
.item-label-floating {
  align-items: start;
}

and/or move the css for this rule to the parent item and inherit it in the inner one so the user has more control over it.

In the meantime could you please continue to use the workaround. Thanks! 🙂

[jmontana]

Will do. Thanks for looking into this!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.