How to enable scrolling in ionic? - ionic-framework

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>

Related

div with label, input and datepicker button where button is little bellow input

I have a problem with my div element wchich contains label, input and button for opening datepicker popup. Button wchich open this one is a little below the input. I'd like to have all elements in one line. I use bootstrap for that. Below is show my HTML code:
<div class="row">
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date From:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date To:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt2" is-open="datepickers.dtSecond" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
Could someone help me with that? I would be greatful for helping
Best regards ;)
By making use of Bootstrap's .form-group wrapper you can achieve the results you desire:
<div class="form-group">
<label for="usr" class="control-label">Date From:</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
</div>
You can read more about .form-group and a variety of other form-related helper-classes on Bootstrap's documentation page: http://getbootstrap.com/css/#forms

ng-click inside label does not work

<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>

How to get parameter value from a redirect_uri in ionic?

I am using Ionic.
I have a link here:
https://open.weixin.qq.com/connect/qrconnect?appid=wx0f05d08a307a4050&redirect_uri=http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&response_type=code&scope=snsapi_login&state=1234567abc#wechat_redirect
when I use WeChat Scan QR Code function to scan it, the link will redirect to the “redirect_uri” with code as a request parameter:
http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&code=0110c30e667a2ae723b06c542ddc055W&state=1234567abc
I need to get request parameter code's value 0110c30e667a2ae723b06c542ddc055W in an ionic framework.
Here is the code:
<script id="templates/sign-in.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="form-group">
<iframe id="upload_target" name="upload_target" src='https://open.weixin.qq.com/connect/qrconnect?appid=wx0f05d08a307a4050&redirect_uri=http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&response_type=code&scope=snsapi_login&state=1234567abc#wechat_redirect' style="width:340px;height:340px;border:0px solid #fff;" scrolling="no" frameBorder="no"></iframe>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="signIn(user)">
Sign-In
</button>
<!--<p class="text-center">
Forgot password
</p>-->
</div>
</ion-content>
</ion-view>
</script>
How can I achieve that?

Ionic grid alignment row and column with column offset

I have the following content in ionic.
<ion-content>
<div class="row row-center">
<div class="col-150 col-offset-50"><h4>Login</h4></div> </div>
<div class="row">
<div class=" col-10 col-offset-50"><h4>Username</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="text" placeholder="Username" ng-model="username">
</label></div>
</div>
<div class="row row-bottom">
<div class=" col-10 col-offset-50"><h4>Password</h4></div>
<div class=" col-10 col-offset-5"><label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
</div>
</ion-content>
The output looks like this:
I am new to ionic and would really appreciate some help in
1)space between the two rows for username and password
2)Aligning both the username and password rows a little more to the left so that the Login row looks centered.
Why don't you use inline labels?
To align all labels to center, add text-center class to your labels.
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label text-center">Login</span>
</label>
<label class="item item-input">
<span class="input-label text-center">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label text-center">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To centrally align just 'Login' label, add text-center just to that label
<ion-content>
<div class="list">
<label class="item text-center">
Login
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
</ion-content>
To add space between items, add margin-bottom to .input-label class. Don't do this in the original ionic css file - create another stylesheet to contain all your overrides.

Bootstrap dropdown form width using col-*

I am trying to make dropdown login form in navigation bar using Bootstrap 3, but it does not look good - labels and inputs are wider than drop down ... panel.
How I can change drop down form width using col-* Bootstrap classes?
Here is the code (http://getbootstrap.com/css/#forms-horizontal):
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Sign in <b class="caret"></b>
<div class="dropdown-menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</li>
</ul>
Thanks in advance.
You could add padding to the .dropdown-menu and change your columns to col-lg-11
Example: http://bootply.com/110118