I’m using ionic 2 on windows 10 and for a reason I can’t figure out exactly, it seems like the ionic components aren’t working properly - they don’t have the correct look and while I can check the generated console code to be correct, the actual look of the components is incorrect - buttons are incorrect, stacked label inputs don’t have stacking, text inputs don’t work full width, the list goes on.
Attached is an image example of the following code:
login.html:
<ion-navbar secondary *navbar>
<ion-content>
<ion-list>
<ion-list-header>
Login
</ion-list-header>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
<button primary full (click)="signUp()">
Sign Up
</button>
<button secondary full (click)="signIn()">
Sign In
</button>
</ion-content>
login.js:
import {Page, NavController} from 'ionic-angular';
import {SigninPage} from '../signin/signin';
import {SignupPage} from '../signup/signup';
@Page({
templateUrl: 'app/login/login.html'
})
export class LoginPage {
static get parameters(){
return [[NavController]];
}
constructor(nav){
this.nav = nav;
this.data = null;
}
signUp(){
this.nav.push(SignupPage);
}
signIn(){
this.nav.push(SigninPage);
}
}
login.scss:
.login {
}
And now, what it looks like when I use ionic serve.
app.js and app.html are the default stuff for a basic app, with the only difference being the line with “this.root” now being “this.root=LoginPage” instead of whatever is the usual.
this is what my index.html looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<!--
Looking for a style sheet?
Webpack loads styles as dependencies in your javascript
See www/app/app.js as an example
-->
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="build/js/es6-shim.min.js"></script>
<script src="build/js/Reflect.js"></script>
<script src="build/js/app.bundle.js"></script>
<script src="cordova.js"></script>
</body>
</html>
