Input goes under header when focus

Ionic Framework ionic-v3
1

Hello Everyone,
Please help me. I am developing an application in which input going under header.
Thanks,
Tushar

I have attached screenshot where email input goes under header.

InkedScreenshot_20180912-210210_LI
InkedScreenshot_20180912-210210_LI.jpg1080×1920 161 KB

2

Are you able to post some of the HTML? It may be that your form items aren’t wrapped inside the <ion-content> tag.

3

Yes.
This is my login.html

<ion-content id="loginform" class="has-header has-subheader"  col-12 padding>
     
    
    <ion-grid>
      <ion-row>
        <ion-col col-12 text-center>
          <form class="animated"  [formGroup]="loginform"  (ngSubmit)="logForm()">

            <ion-list style="border:none!important;">
              <!-- <ion-item *ngIf="!loginform.controls.email.valid && submit">Please provide valid email</ion-item> -->

              <ion-item style="border-top:none!important;"> 
                <ion-input placeholder="email" type="email" formControlName="email">

                </ion-input>
              </ion-item>
              <!-- <ion-item *ngIf="!loginform.controls.password.valid && submit">Please provide valid password</ion-item> -->

              <ion-item>
                <ion-input type="password" placeholder="password" formControlName="password">

                </ion-input>
              </ion-item>
              <ion-item class="loginbtn" style="border:none!important;">
                <button ion-button col-6 id="login" [disabled]="!loginform.valid" type="submit" color="secondary">Login</button>
                <button ion-button col-6 id="signup" [disabled]="!loginform.valid" type="submit" color="danger">Sign Up</button>

              </ion-item>
              <ion-item class="loginbtn" style="border:none!important;text-align:center;cursor: pointer;">
               <a> Forgot Password?</a>
              </ion-item>
              <!-- <ion-item text-wrap style="color:red;border:none!important;">This email address is not registered with us.</ion-item>
              <ion-item text-wrap style="color:red;border:none!important;">This email address already exist</ion-item> -->

            </ion-list>

          </form>


        </ion-col>
      </ion-row>
  
    </ion-grid>
  </ion-content>
4

Ionic:

ionic (Ionic CLI) : 4.1.2 (C:\Users\TUSHAR\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : not installed
Cordova Platforms : android 6.1.2
Cordova Plugins : not available

System:

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

5

I pasted that into a new project and I’m not experiencing the issue. Have you created any global styles that may be affecting it? Or any styles local to that page?

6 
// http://ionicframework.com/docs/theming/


// App Global Sass

   .scroll-content {
overflow-y: hidden !important;
  }


  .toolbar-title-md{
      color:black;
      text-align: center;
  }

  .tablist .scroll-content{
    justify-content: initial!important;
  }
  
  .toolbar-background-md{
background-color: #fff!important;
color:black;
}

.toolbar , .toolbar-md{
  background-color: rgb(62, 27, 146)!important;
color: #fff;
}


login.scss

#loginform {
 // border:1px solid;
 // display: flex;
  flex-direction: column;
  //justify-content: center;
  
  }

  #login,#signup{
    padding:18px;
  }

.scroll-content{
 // display: flex;
  // flex-direction: column;
  // justify-content: center;
}

.loginbtn .item-inner{
  border:none!important;
}
7

Hey,

Its solved.I was testing in browser.In mobile its working.