Ionic-framework: Input boxes are having different sizes on Login

[Sampath-Lokuge]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

It seems 2 different sizes on a login page input boxes.

<ion-content padding class="page1">
  <ion-list>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

<div padding>
  <button block>Sign In</button>
</div>
</ion-content>

Here is the Plunker

[jbagaresgaray]

I believe that is the normal design, check out the docs on Inputs you can see its all the same :)

[Sampath-Lokuge]

Hi @jbagaresgaray
Yes, I got that from the doc.But this is not nice no? My client told me to make it the same size.I have done that.But this is a Bug.That is why I have put it here.Hope Awsome Ionic team will fix this soon.

[jbagaresgaray]

Its not a bug, its a default design by the Ionic Team... lets wait for the moderator of the Ionic Team to confirm your issue.. For the meantime you can customize and redesigned the form via CSS

[Sampath-Lokuge]

What is the use case of it? What issue they'll go to solve by designing like that? How bad when you see this on the small mobile device? @jbagaresgaray

[mburger81]

@Sampath-Lokuge it's not a Bug but it's by design from IonicTeam, I don't know if this is by MD style guides, but I'm in your opinion this is not very beautiful! I wondered why the login page of ionics conference app had not this look after investigating on it I found the motivation of that and so also a workaround!

On there login page they have an validation paragraph and having this the look is the look as we expected for it.
So you can add only an empty paragraph after the last input and it should work

[brandyscarney]

Thanks for the issue! This is a duplicate of https://github.com/driftyco/ionic/issues/5537 so I will be closing this issue, but please read on for more details.

This is by design for iOS to match the default list style in the Settings application:

For Material Design (default Android mode) it usually varies between the same style or no lines:

So you could add the no-lines attribute to the list to completely remove all lines:

<ion-list no-lines>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

or you can remove them from the list since the list is what's styling them this way:

<ion-item>
  <ion-label>Username</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Password</ion-label>
  <ion-input type="password"></ion-input>
</ion-item>

However, I do agree that there needs to be an easy way to make the border take up the full width, and it will be something that we add.

[Sampath-Lokuge]

Thanks a lot, @brandyscarney Really nice explanation.Appreciate it :)

[mburger81]

@brandyscarney I'm not sure if you are right

See this code of mine:

       <form #loginForm="ngForm" novalidate>
            <ion-list no-lines>
                <ion-item>
                    <ion-label><ion-icon name="person"></ion-icon></ion-label>
                    <ion-input [(ngModel)]="login.username" placeholder="Username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" required></ion-input>
                </ion-item>
                <!--<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
                    Username is required
                </p>-->
                <ion-item>
                    <ion-label><ion-icon name="lock"></ion-icon></ion-label>
                    <ion-input [(ngModel)]="login.password" placeholder="Password" name="password" type="password" #password="ngModel" required></ion-input>
                </ion-item>
                <!-- BUG: This is needed -->
                <!--<p></p>-->
                <!--<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
                    Password is required
                </p>-->
            </ion-list>

            <ion-row responsive-sm>
              <ion-col>
                <button ion-button (click)="doLogin(loginForm)" type="submit" block>Login</button>
              </ion-col>
            </ion-row>
        </form>
        <ion-list no-lines>
            <ion-item>
                A
            </ion-item>
            <ion-item>
                B
            </ion-item>
        </ion-list>

On setting no-lines fir first and second list, for the list with inputs I have the big last line, for the second list there are no lines, also the last one isn't there
But in this case I'm not sure which are the right MD behavior

But If I click on the username input the input is highlighted

And thats right, because this is the line for the INPUT and not the LIST
If I click on the second input for password the last line, the long one is highlighted, but this should be the last line of the list and not the INPUT line?

If I an-comment the <p></p> under the second input I got it worked as I expecting it, this is the same thing as you have for your conference app

I'm really not sure, but I don't think this is as MD style guides?

[brandyscarney]

@mburger81 I was speaking more along the general lines of lists for Material Design. For inputs, yes there is generally a border underneath them. The input being highlighted when it has no-lines on Material Design is actually a bug, which I created an issue for here: https://github.com/driftyco/ionic/issues/9639

All of the Material Design guidelines for inputs are here: https://material.io/guidelines/components/text-fields.html

The problem is in our implementation we are adding borders to the actual items, not to the individual inputs. We probably need to re-evaluate the styling on inputs in general, and separate them from items.

[mburger81]

@brandyscarney Thaaank you! :+1: :smiley:

[AltRoot17]

I Removed the <ion-list> , its work for me

[Immortalt]

@mburger81 Thank you!
Adding <p></p> worked well!

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