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

Stacked labels always center content #16375

Closed
jmontana opened this issue Nov 19, 2018 · 8 comments

Comments

3 participants
@jmontana
Copy link

commented Nov 19, 2018

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.

image

@ionitron-bot ionitron-bot bot added the triage label Nov 19, 2018

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Nov 28, 2018

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:

screen shot 2018-11-28 at 6 43 54 pm

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 comment has been minimized.

Copy link

commented Nov 29, 2018

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

This comment has been minimized.

Copy link

commented Nov 29, 2018

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

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Nov 29, 2018

@ionitron-bot ionitron-bot bot closed this Nov 29, 2018

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Nov 29, 2018

@ionitron-bot ionitron-bot bot removed the triage label Nov 29, 2018

@brandyscarney brandyscarney reopened this Nov 29, 2018

@ionic-team ionic-team unlocked this conversation Nov 29, 2018

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Nov 29, 2018

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

@jmontana

This comment has been minimized.

Copy link
Author

commented Nov 29, 2018

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.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Nov 29, 2018

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Nov 29, 2018

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:
screen shot 2018-11-29 at 10 50 07 am

align-items: start:
screen shot 2018-11-29 at 10 48 46 am

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! 🙂

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Nov 29, 2018

@ionitron-bot ionitron-bot bot removed the triage label Nov 29, 2018

@jmontana

This comment has been minimized.

Copy link
Author

commented Nov 29, 2018

Will do. Thanks for looking into this!

Ionic Core automation moved this from Backlog 🤖 to Done 🎉 May 24, 2019

brandyscarney added a commit that referenced this issue May 24, 2019

@ionitron-bot

This comment has been minimized.

Copy link

commented Jun 23, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jun 23, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.