One issue I'm facing is that my login screen for the application automatically focuses on the 'username' input field and triggers the keyboard to pop up. This causes the contents of the login screen to push up, resulting in incorrect dimensions.

How can I prevent this auto-focus behavior on the first input field?

It's worth noting that this problem only occurs on iOS; it works fine on Android.

This is how the application looks when launched (blocking the fields and pushing the content upwards).

Here is the code snippet:

<ion-view title="*************" hide-back-button="false">

  <ion-content class="has-header" scroll="false">


  <center style="position:relative;">

<div id="logo">
           <img src="img/lof_logo.png" style="margin-top:40px;" class="img-responsive" width="270"/>
        </div>




  <div  class="box on fadein fadeout " ng-show="toggle" ng-animate="'box'"  style="z-index:1">


      <div  class="container" ng-controller="LoginController">

      <form id="ftForm" name="form" autocomplete="off" novalidate shake-that  ng-submit="login(credentials)" novalidate>


          <div class="panel-body">
            <div class="form-group box-shadow" ng-class="{'has-error': form.name.$invalid && submitted}">

             <input style="padding-left:5px;"
                 type="text"
                 class="form-control"
                 id="username"
                 name="username"
                 placeholder="User Name"
                 ng-model="credentials.username"
                 ng-model-options="{updateOn: 'blur'}"
                 required>
            </div>
            <div class="form-group box-shadow" ng-class="{'has-error': form.password.$invalid && submitted}">

              <input style="padding-left:5px;"
                type="password"
                class="form-control"
                id="password"
                name="password"
                placeholder="Password"
                ng-model="credentials.password"
                required>
            </div>


          </div>

<div class="box-shadow">


 <button type="submit" class="btn btn-primary btn-block">Login</button>

</div>
      </form>

      <div class="alert alert-success message" ng-show="showMessage">Well done!</div>

    </div>


  </div>

<a href="#"> 

    <img src="img/online_banking_bg.png" class="img-responsive" style="margin-top:40px; z-index: 1; margin-bottom:40px;" ng-click="toggle = !toggle" />

 </a> 
<ion-scroll zooming="false" direction="y" style="height:250px;">




    <div class="row" style="text-align: center;">
          <div class="col">

               <a style="font-size: 20px; color:" href="#/app/services/product">
                  <i class="icon ion-arrow-graph-up-right" style="font-size: 50px;"></i>
                           <h5>Products and Services</h5>

                </a>

          </div>
          <div class="col">

             <a style="font-size: 20px; color:" href="#/app/services/locations">
                  <i class="icon ion-android-location" style="font-size: 50px;"></i>
                           <h5>Locate a Branch / ATM</h5>

            </a>
          </div>

    </div>
     <div class="row" style="text-align: center;">
          <div class="col">

               <a style="font-size: 20px; color:" href="#/app/services/calc">
                  <i class="icon ion-ios7-calculator" style="font-size: 50px;"></i>
                           <h5>Financial Calculator</h5>

                </a>

          </div>
          <div class="col">

             <a style="font-size: 20px; color:" href="#/app/services/news">
                  <i class="icon ion-ios7-world-outline" style="font-size: 50px;"></i>
                           <h5>News and CSR</h5>

            </a>
          </div>

    </div>
     <div class="row" style="text-align: center;">
          <div class="col">

               <a style="font-size: 20px; color:" href="#/app/services/promotion">
                  <i class="icon ion-android-promotion" style="font-size: 50px;"></i>
                           <h5>Promotions and Offers</h5>

                </a>

          </div>
          <div class="col">

             <a style="font-size: 20px; color:" href="#/app/services/contact">
                  <i class="icon ion-ios7-telephone" style="font-size: 50px;"></i>
                           <h5>Contact and Feedback</h5>

            </a>
          </div>

    </div>

     <br/><br/>

 </ion-scroll>

 <!-- 

    <div class="item item-text-wrap">
                  <div class="button-bar">
                      <a class="button" href="#/app/services/product">Small</a>
                      <a class="button" href="#/app/account/balance">Medium</a>
                      <a class="button" ng-click="showImage(3)">Very large</a>
                  </div>
    </div>

-->
</center>
<script id="image-modal.html" type="text/ng-template">
              <div class="modal image-modal transparent">
                  <ion-pane class="transparent">
                     <img ng-src="{{imageSrc}}" class="fullscreen-image"/>
                  </ion-pane>
              </div>
    </script>

  </ion-content>
</ion-view>