I am getting issue while redirecting to ion-list template with approx. 700 items. There comes a delay of around 4-5 seconds which is decreasing performance.Below is my code. Can someone please suggest me the solution?
<ion-modal-view class="bgImg">
<ion-view>
<ion-header-bar class="bar-light">
<h1><img class="title-image titleImg" src="img/logoIB.png"/></h1>
<div class="buttons button-clear">
<button class="button button-clear" ng-click="refreshList()" style="margin-top:40px;"><i class="icon ion-refresh" style="font-size:30px;"></i></button>
</div>
</ion-header-bar>
<ion-content scroll="true" >
<div data-ng-repeat="(letter, authors) in sorted_users" class="alpha_list">
<ion-item class="item item-divider" id="index_{{letter}}">
{{letter}}
</ion-item>
<ion-item ng-repeat="author in authors" ng-click="getSelectedUser(author.user_id,author.passcode,author.gesturecode,author.username)">
{{author.last_name}} {{author.first_name}}
</ion-item>
</div>
</ion-content>
<ul class="alpha_sidebar">
<li ng-click="gotoList('index_{{letter}}')" ng-repeat="letter in alphabet">
{{letter}}
</li>
</ul>
</ion-view>
Related
When I try to dynamically add content in MODAL(overflow-scroll is set false), the page adds white space at the bottom of page and prevents me to scroll up to reach the top of "ion-content".
Can anyone help me?
My code:
<ion-modal-view>
<ion-header-bar>
....
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="fc in query.filterChoices">
...
</ion-item>
</ion-list>
<div class="row">
<div class="col col-20">
</div>
<div class="col col-60">
<button class="button button-stable button-block" ng-click="addFilterChoice();">
Add Filter
</button>
</div>
<div class="col col-40">
</div>
</div>
</ion-content>
I'm creating a project using Ionic 1.3.2 and building to Android 5.1.1. The problem is after buiding the classes has-header and has-tabs-top are added into <ion-content> automatically and because this a space is beeing showing. I don't know why this happens and I don't know how to remove these classes or if there's another solution.
How could I solve this ?
View
<ion-view>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="O que procura ?">
</label>
</div>
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="empresa in empresas | filter:pesquisar"
ng-click="getEmpresa({{empresa.id}})" >
<img ng-src='{{empresa.imagem}}'>
<h2 class="customTitle">{{empresa.razaoSocial}}</h2>
<div style="margin-bottom:20px">
<ul>
<li ng-repeat="ce in empresa.categorias | filter:pesquisar"
class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>
</ul>
</div>
<div class="row row-bottom">
<div class="col col-25"><i class="icon ion-thumbsup icon-24px"></i></div>
<div class="col col-25"><i class="icon ion-chatbox icon-24px"></i></div>
<div class="col col-25">
<i class="icon ion-ios-telephone icon-24px"></i>
</div>
</div>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
As per #MikeT's comment, but i think you want:
<ion-content style="top:0px">
Add this attribute to your ion-content
hide-nav-bar="true"
I need a scrollable page with ion-slides directive. If i set scroll=true in ion-content the slider is not shown on the page. I'm running ionic 1.3.1 and using the new ion-slide directive. This is my code,
<ion-content class="padding" scroll="false">
<div class="list card">
<div class="item no-padding">
<img class="full-image" src="http://12.jpg">
</div>
<div class="item ">
<button class="button icon-left ion-android-navigate button-stable">Directions </button>
<button class="button icon-left ion-ios-telephone button-stable">Call </button>
<button class="button icon-left ion-android-share-alt button-stable">Share</button>
</div>
</div>
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/0000">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
</ion-slides>
</div>
<h4>About </h4>
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</ion-content>
what am i doing wrong, How do i get the ion-slides to work in a scrollable page?
Thanks for any help
How about wrapping the inside of your ion-slide-page with an ion-content like:
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<ion-content has-header="true" padding="true">
<img src="http://placehold.it/375x468/">
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
I would like to note that this should work with Android. I think I had to remove the ion-content for iOS to work on the device.
*Edit - Also, my outside ion-content is set to true
I have tried several code samples to get a back button in my home page. I couldnt see the nav back button. Where i am wrong?
<ion-side-menus enable-menu-with-back-views="true">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="dark-bg expanded">
<span>R</span>
<p align="center"> My App</p>
</ion-header-bar>
<ion-content class="stable-bg has-expanded-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.settings">
Settings
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.profile">
Profile
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.logout">
Log out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home page code
<ion-view title="Home">
<ion-content>
<div class="list card">
<a class="item item-icon-left assertive" ui-sref="makerequest">
<i class="icon ion-ios-list-outline"></i>
Make New Request
</a>
<a class="item item-icon-left assertive" ui-sref="viewrequest">
<i class="icon ion-ios-copy"></i>
View Request
</a>
</div>
</ion-content>
</ion-view>
Added my home page code above.
Regards,
Sabarisri
I've a simple application with a side menu where you can navigate to different views. If I click on an item I get redirected to that view but the back button doesn't show up, which seems to be the default behaviour.
Is there a build in way to show the back button on side menu navigation?
I've found this codepen on the ionic forum which uses the same basic structure as I do: http://codepen.io/mhartington/pen/azwojR
This is my complete menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content id="header-wrapper">
<div id="logoHeader" class="bar bar-header">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
<img src="img/rg-gunz-christmas.png" />
</div>
<ion-nav-bar id="header" class="bar bar-header">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu id="menu" side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="account">
<img ng-src="{{account.AvatarUrl}}" class="avatar"/>
<div class="username">{{account.UserID}}</div>
</div>
<ion-list>
<ion-item menu-close href="#/app/main">
<i class="icon ion-home"></i> <span class="padding-left">Home</span>
</ion-item>
<ion-item menu-close href="#/app/login" ng-show="!account">
<i class="icon ion-log-in"></i> <span class="padding-left">Login</span>
</ion-item>
<ion-item menu-close href="#/app/register" ng-show="!account">
<i class="icon ion-person"></i> <span class="padding-left">Register</span>
</ion-item>
<ion-item menu-close href="#/app/individualRanking">
<i class="icon ion-arrow-graph-up-right"></i> <span class="padding-left">Individual ranking</span>
</ion-item>
<ion-item menu-close href="#/app/clanRanking">
<i class="icon ion-ios-bolt"></i> <span class="padding-left">Clan ranking</span>
</ion-item>
<ion-item menu-close href="#/app/statistics">
<i class="icon ion-stats-bars"></i> <span class="padding-left">Statistics</span>
</ion-item>
<div class="item item-divider" ng-show="account">
Account
</div>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-settings"></i> <span class="padding-left">Settings</span>
</ion-item>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-log-out"></i> <span class="padding-left">Log out</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
its hard to predict here.just check may be some other view is override in the view which is opening.
i had same problem.may be this could help you.
place ion-nav-bar in particular view, where u want to show back button!
<ion-view view-title="Order Details">
<ion-nav-bar class=" dark">
<ion-nav-back-button class="button-clear button-dark stable ">
<i class="ion-arrow-left-c stable"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="content-stable"></ion-content>
</ion-view>
Try this code: You can add this class ion-ios-arrow-back or ion-ios7-arrow-back
<ion-side-menu-content >
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="link" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>