Skip to content

[ionic v4] ion-label positioning broken after the 4.0.0.beta.1 release #15082

@iureguimaraes

Description

@iureguimaraes

Ionic info

Ionic:

   ionic (Ionic CLI)          : 4.0.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.1
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.4

System:

   NodeJS : v10.4.1 (/usr/local/Cellar/node/10.4.1/bin/node)
   npm    : 6.3.0
   OS     : macOS High Sierra

Bug Description
The ion-label position seems not working properly. When we add the position attribute to the ion-label, its rendered in the wrong position.

Expected Behavior
The convencional behavior of the ion-label component position.

Steps to Reproduce
Steps to reproduce the behavior:

  1. Make a page with:
<ion-item>
    <ion-label position="floating">Floating Label</ion-label>
    <ion-input color="primary"></ion-input>
</ion-item>
  
<ion-item>
    <ion-label position="fixed">Fixed Label</ion-label>
    <ion-input color="secondary"></ion-input>
</ion-item>
  
<ion-item>
    <ion-label position="stacked">Stacked Label</ion-label>
    <ion-input color="danger" text-center></ion-input>
</ion-item>
  1. Run 'ionic serve'
  2. See the error like the image below:

ion-label-broken

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions