CODEWITHSUNDEEP
javascripthtmlcsscordovaionic-framework
Arfons
Arfons

Reputation: 96

Ionic not loading elements correctly?

I'm using Ionic right now to develop a simple login page, but for some reason, the code for the header isn't working correctly - wrong alignment and font size - and neither is the code for input forms - they should be full width and when I used stacking labels exactly as any example out there, instead of the labels being on top of the input areas, they would be to the left of the input areas.

This is the code I'm using:

<script src="cordova.js"></script>
<div class="bar bar-header bar-light">
    <h1 class="title">Login</h1>
</div>

<ion-content class="login">
    <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="username" ng-model="data.username">
        </label>
        <label class="item item-input">
          <input type="password" placeholder="password" ng-model="data.password">
        </label>
    </div>
    <button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>

This is the .scss ( which came with the example ):

.login {

}

This is how it looks for me:

incorrect look

Upvotes: 0

Views: 76

Answers (1)

thepio
thepio

Reputation: 6263

You are missing the <ion-view></ion-view> in your html. It should be something like this in your case:

<ion-view view-title="Login" name="login-view">
  <ion-content class="login">
    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="username" ng-model="data.username">
      </label>
      <label class="item item-input">
        <input type="password" placeholder="password" ng-model="data.password">
      </label>
    </div>
    <button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

Upvotes: 1

Related Questions