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:
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>
Related
Hello friends i m new in ionic developer so in my application i integrate keyboard plugin for open from footer and focus field for enter value . Below i use link for plugin
https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754
And in my html page i call it as below
<ion-content #content>
<ion-item no-padding>
<ion-label floating>Name (*) </ion-label>
<ion-input #txtGroupName type="text" [(ngModel)]="client.name"></ion-input>
<ion-footer no-padding no-margin class="custom-footer" [keyboardAttach]="content">
<button ion-button full no-padding no-margin (click)="onClickAddClientContact()">CREATE</button>
</ion-footer>
When i run above code i get error like ERROR Error: Uncaught (in promise): Error: No provider for Keyboard!
any idea how can i solve this?
This is how i am using in my app, without footer. without issue.
<form class="loginForm">
<div class="list">
<label class="item item-input">
<input type="text" class="input1" placeholder="Username" id='username'>
</label>
<label class="item item-input">
<input type="password" class="input2" placeholder="Password" id="pass">
</label>
</div>
<button class="button" id="btn-submit" ng-click="submit()">Sign In</button>
</form>
I don't know the reason why, but at each of page of my webapp, at the left side upper there is a dot like this:
It's an html problem I think, in fact running the snippet below you can see that:
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
However, I put also the controller of this page:
.controller('SendFeedbackCtrl', function($scope, $stateParams, $ionicPopup, restService) {
var token = localStorage.getItem("token");
$scope.tknuser = JSON.parse(token);
$scope.logged = false;
$scope.feedbackform = {
message: "adad",
readfb: false,
user: {
iduser: -1
}
};
And also the class style used:
.ioncontentcatalog {
background-image: url('../img/background.png')
}
That's very strange and I don't know how to solve.
It is the li default style, add this CSS rule to remove it:
list-style
https://developer.mozilla.org/en/docs/Web/CSS/list-style
.ioncontentcatalog li{
list-style: none;
}
<ion-view view-title="Invia feedback">
<ion-content class="ioncontentcatalog">
<li>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=logged>Invia feedback</h2>
<h2 class="sub-header" style="color:#4e67c3;" ng-if=!logged>Per poter mandare un feedback devi registrarti!</h2>
<form name="feedback">
<div class="list" ng-if=logged>
<label class="item item-input">
<textarea name="Text1" cols="40" rows="5" ng-model="feedbacktext" required></textarea>
</label>
<label ng-show="feedback.$invalid"> Scrivi qualcosa </label>
<label class="item">
<button class="button button-block button-positive" ng-disabled="feedback.$invalid" ng-click="send(feedbacktext)">Invia</button>
</label>
</div>
</form>
</li>
</ion-content>
</ion-view>
Just remove li decoration like this:
<li style="list-style-type: none;">
I have the form with fields (name, tel, email, etc.)
<ion-content>
<div class="list">
<div class="row">
<div class="col" ng-hide="hideFild" id="nom">
<label class="item item-input item-floating-label">
<span class="input-label">Nom</span>
<input type="text" placeholder="Nom" ng-minlength="2" ng-maxlength="30" name="nom" ng-model="noteForm.nom">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<span class="input-label">Prenom</span>
<input type="text" ng-maxlength="20" placeholder="Prenom" ng-model="noteForm.prenom">
</label>
</div> ...
And I have another page where I control the visibility of fields:
template.html
<ion-view view-title=" Paramétrage formulaire">
<ion-content>
<ion-list>
<ion-item ng-repeat="fild in filds" class="item item-toggle">
{{fild.name}}
<label class="toggle toggle-balanced">
<input type="checkbox" ng-model="fild.value" ng-change="change(fild)">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
with controller.js for save a data in local storage.
Result in local storage:
Result $scope.noteForm:
How to hide form fields that have the value false in local storage?
Thank you all!!!
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.addNewGoal = function() {
alert($scope.goaltitle);
};
});
<ion-pane view-title="goal">
<ion-header-bar class="bar-positive">
<div class="buttons">
<a nav-transition="android" class="button button-icon icon ion-arrow-left-b" ng-click="" href="#/index"></a>
</div>
<h1 class="title">Add New Goal</h1>
</ion-header-bar>
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal"></textarea>
</label>
</div>
</ion-content>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<button class="button button-positive button-bar no-round-corner" ng-click="addNewGoal()">Add Goal</button>
</ion-tabs>
</ion-pane>
This is my code... I don't know how to explain but it always say undefined when I enter something on the text box...
but $scope.goaltitle = "something" is working on the .controller(); ...
Short Answer
The root cause of this issue is, ion-content does create a prototypically inherited child
scope, that's why goaltitle(primitive type) of controller scope is different than the goaltitle you are using on ng-model
Ideally practice is to follow dot rule while defining view model. So that prototypal inheritance rule will get followed with scope hierarchy.
You should define object and then do assign all the ng-model property in it.
Controller
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.model = {};
$scope.addNewGoal = function() {
alert($scope.model.goaltitle);
};
});
Then have goalTitle, Goal, etc. property in it.
Markup
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="model.goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal" ng-model="model.Goal"></textarea>
</label>
</div>
</ion-content>
I don't want to re-write whole explanation again, so here I'm referencing similar answer, where I've covered all detailed information.
For the html
<input type="text" placeholder="#Title" ng-model="foo.goaltitle">
JS:
$scope.foo = {{
goaltitle : ''
}}
I am using Semantic-UI for designing a site for my project and I while using modal, I am seeing a jittery behaviour.
Here is the link : Click Here to Enter The Project Site
Press the 'Register' button to open up the modal dialog, and you will notice the dialog being formed in the left side and then shows up properly.
Cannot understand the reason for this behaviour.
Some help will be appreciated.
Code :
<!-- Register Box -->
<div class="ui fluid standard modal" id="RegisterBox">
<div class="ui attached message" id="headerImage">
<div class="header" id="head">
Welcome to MeetUp!
</div>
<p id="subHead">Sign-up for a new account here.</p>
</div>
<div class="ui error form segment" id="regForm">
<div class="ui black row">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input class="text" placeholder="First Name" type="text" name="fname" id="txtFn">
</div>
<div class="field">
<label>Last Name</label>
<input class="text" placeholder="Last Name" type="text" name="lname" id="txtLn">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Email</label>
<input class="text" placeholder="Email Id" type="email" name="email" id="txtEmail">
</div>
<div class="field">
<label>Gender</label>
<div class="text ui selection dropdown" id="cmbSex">
<div class="default text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male" data-text="Male">
<i class="male icon"></i>
Male
</div>
<div class="item" data-value="female" data-text="Female">
<i class="female icon"></i>
Female
</div>
</div>
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Password</label>
<input class="text" type="password" placeholder="Password" name="pass" id="txtPassword">
</div>
<div class="field">
<label>Confirm Password</label>
<input class="text" type="password" placeholder="Password" name="Cpass" id="txtRepeatPass">
</div>
</div>
<div class="ui blue button" id="btnSubmit">Register</div>
</div>
<i class="close icon"></i>
</div>
I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.