Could an <ion-input> 's placeholder and text be positioned on the left?

[vali-de-man]

Feature Request

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

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (C:\Users\wibaut\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

System:

   NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Describe the Feature Request
The placeholder value for an element is always horizontally centered. The same holds for the value a user enters. Could an option be provided to position this value on the left of the <ion-input>?

Describe Preferred Solution
A directive on the tag that positions placeholder/value either on the left, in the centre, or on the right.

Describe Alternatives
I have tried to style the component but cannot style the shadow DOM.

Related Code

        <form role="form" aria-labelledby="Login form" (ngSubmit)="login()" [formGroup]="loginForm">
          <ion-input role="input" aria-labelledby="username" placeholder="Username" type="text" formControlName="username"></ion-input>
          <ion-input role="input" aria-labelledby="password" placeholder="Password" type="password" formControlName="password"></ion-input>
          <ion-button role="button" aria-labelledby="log in" type="submit" [disabled]="loginForm.invalid">Log in</ion-button>
        </form>

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

[brandyscarney]

Thanks for the issue! Do you have any images of what you're looking for? I took your code example and put it in a Codepen but I am not seeing the placeholder aligned in the center: https://codepen.io/brandyscarney/pen/qJgPZN

Thanks!

[vali-de-man]

Thanks very much for your reply. Please find an image of the page & mark up in the debugger attached.

What I currently encounter is this:

What I would be very happy with is for the placeholder and the text when it is entered to be aligned on the left, as is done with the slot="start" directive for s.

[brandyscarney]

@vali-de-man Could you try forking the Codepen I pasted above (https://codepen.io/brandyscarney/pen/qJgPZN) and modifying it to show this? I am not able to reproduce this by wrapping it in a grid either. There may be some application styles affecting the input that I can't see. Thank you. 🙂

[vali-de-man]

The problem was indeed in my application styles. I'm very sorry for having you spend time on it!

[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.