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>
Related
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'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>
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.
I've created a dynamic multiple step form (With ng-show) but I have this issue :
When I put the button next outside of form, the user can navigate in step without filling the form.
And when I put the button into every DIV (therefore in the form), the button next submit all of form (but blank) in my data base ...
If you have a suggest for me, I take it with pleasure !
This is my HTML :
<form ng-submit="submitEvent(event)">
<div ng-show="data.step == 1">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-edit fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">Post</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="text" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="Post name" ng-model="event.nameid">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<textarea style="color:#FFF;font-size: 14px;text-align:center;background-color:rgba(255, 255, 255, 0);" placeholder="Description de l'événement" ng-model="event.descriptionid"></textarea>
</label>
</div>
</div>
<div ng-show="data.step == 2">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-clock-o fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">hour</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="date" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="EEE - MMM - yyyy" ng-model-options="{timezone: 'UTC'}" ng-model="event.dateid" placeholder="Date">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<input type="time" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="HH:mm:ss" ng-model-options="{timezone: 'UTC'}" ng-model="event.hourid" placeholder="Heure">
</label>
</div>
</div>
<div ng-show="data.step == 3">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-users fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">Users</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="number" style="color:#FFF;font-size: 18px;text-align:center;" placeholder="Users" ng-model="usersid">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<input type="number" style="color:#FFF;font-size: 16px;text-align:center;" placeholder="Age" ng-model="event.ageid">
</label>
</div>
</div>
<div ng-show="data.step == 4">
<div style="border-bottom:none !important; background : transparent; text-align:center;">
<i class="fa fa-map-marker fa-4x" id="iconstep-ajust"></i>
<h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">Localisation</h4>
</div>
<img id="separation-step" src="img/line.png"></img>
<div class="list" style="top:80px;">
<label class="item item-input item-floating-label" style="border:none;">
<input type="text" style="color:#FFF;font-size: 18px;text-align:center;" ng-model="event.addressid" placeholder="Adresse (Sans le n° de rue)">
</label>
<label class="item item-input item-floating-label" style="border:none;">
<input type="text" style="color:#FFF;font-size: 22px;text-align:center;" placeholder="Ville" ng-model="event.townid">
</label>
</div>
<button class="button button-icon icon ion-checkmark-round" style="position: absolute; top: 2px; right: 5px; color:#FFF; z-index:1000;" type="submit" value="Add Event" ng-click="stepsuccess()"></button>
</div>
</form>
<button class="button button-icon icon ion-ios-arrow-forward" style="position: absolute; top: 2px; right: 5px; color:#FFF; z-index:1000;" ng-hide="data.step == 4" ng-click="nextStep()"></button>
</ion-content>
My controller JS :
$scope.nextStep = function() {
$scope.data.step += 1;
}
$scope.data = {
step: 1,
}
Thanks for your time !
You can disable the the button until all form elements you need are completed and valid, using the ng-disabled directive, for example:
<button type="submit" class="btn btn-primary btn-lg" ng-disabled="artistSignupForm.$invalid" ng-click="send()">{{t 'artist-signup.submitBtn'}}</button>
In my case, I am using angular's native form validation checker $invalid (which you should use, if you want to), but can bind the ng-disabled directive to any other validation expression you require.
I had a similar issue a while back. I was using ng-disabled on the button until form is valid: ng-disabled="formName.$invalid". The submit effect is because HTML5 spec says that the default behaviour of a button in a form should be submit. You can use this directive to prevent this behaviour.
app.directive('preventDefault', function () {
return {
link: function (scope, element, attributes) {
element.click(function (event) {
event.preventDefault();
event.stopPropagation();
});
}
};
});
As #Mindastic pointed out, adding an attribute type="button" on your button also solves the problem without the necessity of a runtime compile by angular. :)
Working on a sliding login panel using Html, CSS and jquery with some plugins.
http://24.125.42.135/
As you can see, the bar pushes the content downwards when activated (click login at top right). This is great if you are on the first screen. However, if you are on the second screen and then try to press login, the bar is not there.
I'm stumped conceptually on what to do here so that the login button remains fixed at the top like the rest of the menu, but still pushes the content down no matter where you are on the page.
HTML
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Sign In</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#?signin">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
CSS
/* sliding panel */
#toppanel {
position: relative; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Javascript
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
I suggest making the rest of the content inside a fixed div that you can scroll.
This way you never move your div, unless you toggle the login div.
But it still gives the same effect as now.