I have an Ionic App that that when a modal launches it suppose to focus the first input. which is the input element with an ID of #discount.
this is my view.
<script id="discount.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Add Discount</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<span class="input-label">Price</span>
<input type="tel" autofocus class="button-large button-block text-center input-lg" id="discount" ng-model="payment.discountPrice" ui-money-mask="2" />
</label>
<br>
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" class="button-large button-block input-lg" ng-model="payment.discountName" />
</label>
<br>
<button class="button button-large button-block button-positive" ng-click="submitDiscount()">Apply</button>
<button class="button button-large button-block button-assertive" ng-click="closeModal()">Cancel</button>
</div>
</ion-content>
</ion-modal-view>
this is my controller.
$scope.openDiscountModal = function () {
//cache the modal
$ionicModal.fromTemplateUrl('discount.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true,
backdropClickToClose: false
}).then(function (modal) {
$scope.modal = modal;
$scope.modal.show().then(document.getElementById('discount').focus());
console.log('xxx');
});
};
this works fine in the desktop browser but it doesn't focus on my IOS ionic app.
For iOS, you need to add the following configuration in your config.xml file.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
Please refer the KeyboardDisplayRequiresUserAction section in this iOS Configuration article.
Bydefault KeyboardDisplayRequiresUserAction is set as true.
After adding the configuration preference, your code will no longer required this code for focusing your first field
then(document.getElementById('discount').focus()
You can simply use
$scope.modal.show()
Because focusFirstInput: true will automatically focus the first field, in your case discount input field.
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;">
.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'm a beginner in ionic version 1.x.x development.
I tried to set full image background in my login page.
But when the keyboard showed up, the background image is resizing and it's very annoying. Please help me. Thanks
.auth.scroll-content{
background: url('../../img/background/NIKE_5_Futsal.jpg') no-repeat;
background-size: cover;
background-position: center;
margin: auto;
z-index: 2;
}
<ion-view hide-nav-bar="true">
<ion-content padding="true" class="auth" scroll="false">
<h3>Welcome</h3>
<form name="loginForm" ng-submit="login.loginSubmit(loginForm.$valid)" novalidate>
<div class="list">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="login.userData.email" required />
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="login.userData.password" required />
</label>
<button class="button button-full button-assertive" ng-disabled="loginForm.$invalid">Login</button>
<button class="button button-full button-clear button-positive icon-right ion-chevron-right" ui-sref="register">Register</button>
</div>
</form>
</ion-content>
</ion-view>
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>