I'm working on an Ionic 1 project. I'm trying to have a nav-bar with a back button inside one of the views, but its not appearing. I inspected on Chrome, and saw that the class of the back button became hide. Is there anyway I can make it appear?
Here's my code:
<ion-view ng-controller="GuDetailCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c show">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<span>{{hotel.name}}</span>
</label>
<label class="item item-input">
<span class="input-label">Locality</span>
<span>{{hotel.locality}}</span>
</label>
<label class="item item-input">
<span class="input-label">Amenities</span>
<span>{{hotel.amenities}}</span>
</label>
</div>
<button class="button button-positive" ng-click="modal.show()">
Create Booking
</button>
<script id="templates/booking.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Booking</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Check-in Date</span>
<input ng-model="newBooking.inDate" type="date">
</label>
<label class="item item-input">
<span class="input-label">Check-out Date</span>
<input ng-model="newBooking.outDate" type="date">
</label>
<label class="item item-input">
<span class="input-label">No. of Rooms</span>
<input ng-model="newBooking.rooms" type="number">
</label>
<button class="button button-full button-positive" ng-click="createBooking(newBooking)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
</ion-content>
</ion-view>
You can try this code.The header has a class by default, if you don't explicitly specify one, then the back button won't show up. you can use bar-light or bar-royal in your class.
<ion-nav-bar class="bar-royal">
<ion-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>
for more, You can see here
Related
I have a few form inputs inside a <ion-slide > but I can not scroll to view all fields in the slide, it prevents me from scrolling inside the slide. On a device, when there is an ion-input, the ion-list scrolling behaviour does not work.
There is also some CSS issue with the labels overlapping (See img below)... I am using Ionic v 1.3.
<ion-view scroll="true">
<ion-nav-bar class="bar-light">
<ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation"
ng-click="startApp()" ng-show="!slideIndex">
Skip
</button>
<button class="button button-positive button-clear no-animation"
ng-click="previous()" ng-show="slideIndex > 0">
Previous
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-positive button-clear no-animation"
ng-click="next()" ng-show="slideIndex != 2">
Next
</button>
<button class="button button-positive button-clear no-animation"
ng-click="startApp()" ng-show="slideIndex == 2">
Finish
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-slide-box on-slide-changed="slideChanged(index)" scroll="true">
<ion-slide scroll="true">
<h3>Start </h3>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="John">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Suhr">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="john#suhr.com">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email (use your gym email)</span>
<input type="text" placeholder="john#suhr.com">
</label>
<label class="item item-input item-select">
<div class="input-label">
Select your Gym Location
</div>
<select>
<option>FitnFast KellyVille</option>
</select>
</label>
</div>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</ion-slide>
</ion-slide-box>
</ion-view>
I had the same issue and found on the ionic forums a solution by using a ion-content inside of ion-slide and it's working for me now.
https://github.com/driftyco/ionic/issues/5297
<ion-view>
<ion-content scroll="false">
<ion-slide-box>
<ion-slide>
<ion-content>
<div class="box blue"><h1>BLUE</h1></div>
</ion-content>
</ion-slide>
<ion-slide>
<ion-content>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-content>
</ion-slide>
<ion-slide>
<ion-content>
<div class="box pink"><h1>PINK</h1></div>
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
The thing that helped me in exactly the same problem was putting scrollAssist: false in my app.module.ts like so:
IonicModule.forRoot(MyApp, {
scrollAssist: false,
tabsHideOnSubPages: true
}),
I am using copy paste code from ionic docs for header inputs
http://ionicframework.com/docs/components/#bar-inputs
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
But I am not seeing it.
I only want my header to be a search bar in one view.
Heres the views code beginning:
<ion-view>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<ion-content>
...
You can add Header Inputs two way
1) Add in index.html
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<ion-nav-view></ion-nav-view>
2) Add in index.html
<ion-nav-view></ion-nav-view>
and in your template page(e.g. template/home.html)
<ion-view>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
<ion-content>
...
</ion-content>
</ion-view>
Demo
<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 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?
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.