I'm a beginner on ionic framework. Just doing markup for the app not developing the whole application.
on focusing field the keyboard opens and pushed ion-footer upwards i have set position and bottom values but none of them is working.
Here is the code of the page.
<ion-pane class="login">
<ion-content class="has-footer" scroll="false">
<div class="row topgap">
<div class="col-80 col-offset-10">
<div class="fixWidthContainer">
<h2 class="text-center">Welcome to Givi</h2>
<input type="text" placeholder="Full Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<br />
<button class="button button-full LoginButton">Sign up</button>
<button class="button button-full LoginButton facebook">Sign up using Facebook</button>
</div>
</div>
</div>
</ion-content>
<ion-footer-bar class="transparentfooter">
<button href="#" class="button footercustombutton">Login</button>
</ion-footer-bar>
</ion-pane>
Also when the keyboard opens the background value is cover is also adjust itself and get smaller. What to do with this...
check this value if its false change it to true
<preference name="Fullscreen" value="true" />
Related
I developed the following login page in Ionic:
<form name="login_form" class="form-container" novalidate>
<div class="byf-logo">
<img src="img/logo-text-clear-transparent.png" />
</div>
<div class="list list-inset byf-login-form">
<label class="item item-input">
<img src="img/icons/person.png" alt="">
<input type="email" placeholder="Email" ng-model="user.email" required>
</label>
<label class="item item-input">
<img src="img/icons/locker.png" alt="">
<input type="password" placeholder="Password" ng-model="user.password" required>
</label>
<button class="button button-block button-assertive" ng-click="login(user)" ng-disabled="login_form.$invalid">CONNEXION</button>
</div>
</form>
<div ng-show="error">
<p class="message error"><i>{{error}}</i></p>
</div>
I expect the form to be sliding up a little when the password input (second input) is in focus because keyboard overlaps it:
It works perfectly in another page without writing any particular code so I guess it is default behavior.
Any idea why it doesn't slide here ?
I had this same problem and the only way i could get it to work was as follows
this.keyboard.onKeyboardShow().subscribe(e => {
console.log('Keyboard height is: ' + e.keyboardHeight);
jQuery('body').animate({ 'marginTop': - e.keyboardHeight + 'px' }, 200);
});
this.keyboard.onKeyboardHide().subscribe(e => {
jQuery('body').animate({ 'marginTop': 0 + 'px' }, 200);
});
I have a login page. Its fixed now, but I want to enable scroll when I focus on any of one text box. How to do it?
<ion-view>
<ion-content class="background">
<div class="loginscreen">
<div class="row">
<div class="col-80 col-offset-10">
<div class="appheader-frame">
<span>
<img src="img/clock.png" alt="clock" class="clockwidth"></img>
</span>
<h1 class="timesheettext">
<b>Timesheet Tracking</b>
</h1>
</div>
</div>
</div>
<div class="row">
<div class=" formpadding col-80 col-offset-10">
<form novalidate name="loginForm" ng-submit="doLogin(loginForm)">
<label class="item item-input labelusername">
<i class="icon placeholder-icon"><img src="img/user.png" alt="" style="width:20px;height:20px;"/></i>
<input name="UserName" type="text" ng-model="User.UserName" placeholder="Username or Email" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.UserName.$error.required && loginSubmitted" class="usernameerror">
Please provide username
</p>
<label class="item item-input labelpassword">
<i class="icon placeholder-icon"><img src="img/password.png" alt="" style="width:20px;height:20px;"/></i>
<input type="password" name="password" id="password" ng-model="User.Password" placeholder="Password" ng-focus="hidefooter()" required>
</label>
<p ng-show="loginForm.password.$error.required && loginSubmitted" class="usernameerror">
provide Password
</p>
<p ng-show="myflag">
wrong credentials
</p>
<button class="button button-block button-lightgreen" type="submit">
<p class="login">
<b>submit</b>
</p>
</button>
</form>
</div>
</div>
</div>
<div class="bar bar-footer bar-inherit myfooter hide-on-keyboard-open">
<div class="title">
<p id="footer" class="byxyz" ng-show=footerflag>By xyz Software Pvt Ltd</p>
</div>
</div>
</ion-content>
</ion-view>
Is that possible in ionic framework? Then how to do it? Please explain.And don't remove anything in the page and don't add anymore details to make it scroll.I simply want to enable scroll in it but the page should be same as it is right now
simply added overflow-scroll="false" in ion-content.
<ion-content class="background" overflow-scroll="false" >
//code
</ion-content>
<ion-view>
<div class="bar bar-header bar-dark">
<h1 class="title">Welcome</h1>
</div>
<ion-content class="has-header">
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</label>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
why the button(获取验证码) inside label tag doesnt work?
but the button(登 陆) outside label tag work fine, why?
please help me to fixed this. I need to make a response when click
the button(获取验证码)
working demo
The solution is simply not to use a label for the item. Instead just use a div
html
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-input">
<span class="input-label">手机号</span>
<input type="text" ng-model="phonenumber" placeholder="这里输入手机号" maxlength="11">
<!-- <input ></input> -->
<button class="button button-dark" style="margin-right: 16px;" ng-click="getVerifyCode(111)">获取验证码</button>
</div>
<label class="item item-input">
<span class="input-label">验证码</span>
<input type="password" ng-model="verifycode">
</label>
<label class="item">
<button class="button button-block button-dark" ng-click="getVerifyCode(111)">登 陆</button>
</label>
</div>
</form>
I need two horizontal checkboxes in one page:
<div data-role="content">
<div data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies">
<legend>Hobbies (separates by ',')</legend>
</fieldset>
</div>
<div id="language" data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Languages (ordered by native, second lang...)</legend>
<input id="eng" type="checkbox">
<label for="eng">English</label>
<input id="zho" type="checkbox">
<label for="zho">国语</label>
<input id="jpn" type="checkbox">
<label for="jpn">日本語</label>
</fieldset>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button" id="revert">Revert</a>
</div>
<div class="ui-block-b">
<input value="Update" type="submit">
</div>
</div>
</div>
One image is more than a thousand words. As you see, two checkboxes' totally messed up:
Old fashion table tag works!!!
How can I move Date picker popup to show on right side? Currently it is making me to scroll page down to view the calendar.
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy">
<input class="text-input form-control" type="text" name="ARDT" id="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
2. How can size the application number filed width to 15 ?
<div class ="form-group">
<label class="col-sm-2 control-label" >Application Number</label>
<div class="col-sm-3">
<input class="text-input form-control" type="text" name="appNumber" id="appNumber" maxlength="15" size="15"/>
</div>
</div>
DEMO
Twitter bootstrap-3 datepicker has option "orientation":
A space-separated string consisting of one or two of “left” or
“right”, “top” or “bottom”, and “auto” (may be omitted); for example,
“top left”, “bottom” (horizontal orientation will default to “auto”),
“right” (vertical orientation will default to “auto”), “auto top”.
Allows for fixed placement of the picker popup.