At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:
When really, I would like the the header items of What are you looking for? and Current location to be fixed:
This is my code so far:
<ion-view view-title="Nearby">
<ion-content>
<!-- Search -->
<div class="list">
<div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
<label class="item-input-wrapper">
<input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
</label>
<div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
<label class="item-input-wrapper">
<input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
</label>
<button class="button button-positive button-small" ng-click="location=''; services=''">
<i class="ion-close"></i>
</button>
</div>
</div>
<!-- List of services -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
{{service.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{service.total}}</span>
</i>
</ion-item>
</ion-list>
</div>
<!-- List of regions -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
{{location.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{location.count}}</span>
</i>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I've also created a CodePen here: http://codepen.io/anon/pen/VeQzBv.
You can use a sub-header for this it work for my code:
<ion-header-bar class="bar-light bar-subheader">
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
<button ng-if="searchForce.length"
class="button button-icon ion-android-close input-button"
ng-click="clearSearch()">
</button>
</ion-header-bar>
Codepen demo
Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721
Related
I'm trying to figure out why this toggle on Ionic with Angular doesn't work. I think that the scope of ion-nav-buttons and ion-content are conflicting.
<ion-view view-title="Movimentação">
<ion-nav-buttons side="right">
<button class="button button-icon" id="header-filter" ng-click="showFilters = showFilters ? false : true">
<i class="icon ion-search"></i>
</button>
</ion-nav-buttons>
<ion-content>
<ul class="list" ng-show="showFilters">
<label class="item item-input item-select">
<div class="input-label">
CRAAI
</div>
<select>
<option ng-repeat="item in craai"> {{ item.regiao }} </option>
</select>
</label>
</ul>
</ion-content>
</ion-view>
Can anyone help with this?
Here is my simple code for a demo Ionic Application.
<body ng-app="starter" ng-controller="catego">
<ion-pane >
<ion-header-bar class="bar bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Hardware Shop</h1>
<button class="button button-clear icon ion-plus-circled" ng-click="popover.show($event)"></button>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem"/>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</label>
</div>
<ion-content class="has-subheader" style="padding:5px !important;">
<ion-refresher pulling-text="Refreshing..." on-refresh="dorefresh()"></ion-refresher>
<div class="list" >
<div ng-repeat="element in data | filter : searchitem| orderBy : 'category'">
<div class="item item-divider">{{ element.category }}</div>
<ion-list can-swipe="true">
<ion-item class="" href="#" ng-repeat="innerelement in element.companies | filter : searchitem | orderBy : 'toString()' track by $index">
--- {{innerelement}} <br/>
<ion-option-button class="button-positive icon ion-edit"></ion-option-button>
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-pane>
</body>
The button in my subheader which says NOTWORKING is not working. I have made sure that there are no errors in the console and all other methods are working fine. Is there something I am missing?
Any help is highly appreciated.
You have to move the <button> outside the <label> as in the code below:
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem" />
</label>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</div>
I found better this, This is working fine on my app, Nice gesture on Ios Also
$scope.$on('$stateChangeSuccess', function() {
$('*[ng-click]').each(function() {
$(this).attr("ng-click");
$(this).attr("on-touch", $(this).attr("ng-click"));
});
});
Here is a demonstration of what is going wrong: Video
The pane scrolls too far, it should stop after the last button but it seems to scroll for exactly another page-height.
I have multiple ion-contents but I hide the ones that I don't use at that moment with ng-class="ng-hide"
<body>
<!-- Five number code -->
<div class="animated fadeInRight" data-ng-class="numberCodeShow">
<ion-content scroll="false" style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<form data-ng-submit="showDashboard(code.fiveNumberCode)">
<ul class="fieldList padding">
<li><p style="text-align: center; padding-top: 10px;">Log in met de 5-cijferige code</p></li>
<li class="loginCodeWrapper">
<div class="input">
<input class="loginCode" data-ng-model="code.fiveNumberCode" type="tel" name="code" maxlength="5" required/>
</div>
</li>
</ul>
<div class="padding">
<button data-ng-style="{'border-bottom-color': style.style1}" style="background-color: #FFFFFF" type="submit" class="button button-block button-default signinbutton">Sign In<i data-ng-style="{'color': style.style1}"class="icon ion-arrow-right-c signinIcon"></i></button>
</div>
</form>
</ion-content>
</div>
<!--// Five number code //-->
<!-- Dashboard -->
<div class="animated fadeInLeft dashboard" data-ng-class="dashboardShow">
<ion-content scroll='true' style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<div class="details">
<p class="welcomeName" data-ng-style="{'border-bottom-color': style.style1}"><i data-ng-style="{'color': style.style1}" style="padding-right: 5px;" class="fa fa-user"></i>Welkom {{user.name}}</p>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Accordering</label>
<div>
<div class="padding">
<button data-ng-click="showOpenDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder-open buttonIconLeft"></i>Mijn openstaande taken</button>
</div>
<div class="padding">
<button data-ng-click="showAllDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder buttonIconLeft"></i>Alle Documenten</button>
</div>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Overige</label>
<div class="padding">
<button data-ng-click="getOrganisations()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-contacts buttonIconLeft"></i>Contactpersonen</button>
</div>
<div class="padding">
<button data-ng-click="showImageUpload()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-camera buttonIconLeft"></i>Foto Uploaden</button>
</div>
<div class="padding">
<button data-ng-click="backToFolders()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-document-text buttonIconLeft"></i>Bestanden</button>
</div>
<div class="padding">
<button data-ng-click="showNotifications()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-notifications buttonIconLeft"></i>Notificaties</button>
</div>
</div>
</div>
</ion-content>
</div>
<!--// Dashboard //-->
This is a piece of the code so you can see how I build it up. The variables that are in the code are either ng-show or ng-hide. In this case numberCodeShow = 'ng-hide' and dashboardShow = 'ng-show'.
I tried setting max-height on ion-scroll but it doesn't work. Does anyone know why this problem occurs?
Seems I have fixed it myself by putting scroll = false on the and make a seperate underneath with height:100vh;
To answer A. Vin's question:
This looks like what I had:
<ion-content scroll=true>
.....
.....
.....
</ion-content>
This resulted in the scroll going to far because of an upper div.
This fixed the problem:
<ion-content scroll=false>
<ion-scroll style="height:100vh">
...
...
...
</ion-scroll>
</ion-content>
I hope this resolves your issue too!
If you have any other questions feel free to ask :)
I'm working on saving, retrieving, editing data using SQLite / ionic / Angularjs.
I saved and retrieved the data successfully. And i'm left with an edit page.
I linked href from display page to an edit page with the hope of populating the edit page with data from the display page, but the binding is not working.
Thanks for your kind assistance:
Display view:
<ion-view view-title="List">
<ion-content class="padding" ng-controller="TeamCtrl">
<div class="list list-inset">
<div class="item item-divider item-royal">
PERSONAL DETAILS
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">First Name :
<input type="text" ng-model="data.name" required>
</label>
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">ID :
<input type="number" ng-model="data.id" required>
</label>
</div>
<div class="padding">
<div class="list">
<a class="item" ng-repeat="task in Ourdata" href="#/edit/{{task.id}}">
<h2>{{task.id}}</h2>
<p>{{task.name}}</p>
</a>
</div>
</div>
<div class="padding">
<button class="button button-full button-positive" ng-click="createNewTeamMember(data)">
Save
</button>
</div>
<div class="padding">
<button class="button button-full button-positive" ng-click="DisplayMember(data)">
Display
</button>
</div>
</div>
</ion-content>
</ion-view>
The Edit View:
<ion-view view-title="Edit">
<ion-content ng-controller="TeamCtrl">
<div class="list list-inset">
<div class="item item-divider item-royal">
PERSONAL DETAILS
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">First Name :
<input type="text" ng-model="task.name" required>
</label>
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">ID :
<input type="number" ng-model="task.id" required>
</label>
</div>
</div>
<!--<div class="padding">
<button class="button button-full button-positive" ng-click="DisplaySingleMember(RegId)">
Display
</button>
</div>-->
</div>
</ion-content>
</ion-view>
The Controller:
.controller('TeamCtrl', function($scope, Team, $state) {
$scope.team = [];
$scope.team = null;
$scope.RegId = $state.params.RegId;
$scope.updateTeam = function() {
Team.all().then(function(team){
$scope.team = team;
});
}
$scope.updateTeam();
$scope.createNewTeamMember = function(member) {
console.log("hello");
Team.add(member);
$scope.updateTeam();
};
$scope.removeMember = function(member) {
Team.remove(member);
$scope.updateTeam();
};
$scope.editMember = function(origMember, editMember) {
Team.update(origMember, editMember);
$scope.updateTeam();
};
$scope.DisplayMember = function(member) {
Team.all(member).then(function(data){ $scope.Ourdata= data;console.log($scope.Ourdata);});
};
$scope.DisplaySingleMember = function(RegId) {
Team.get(RegId).then(function(data){ $scope.task= data;console.log($scope.task);});
};
})
I'm trying to put in a list two button icons that can be clicked. I tried doing something like this but the icons overlap:
<ion-list>
<ion-item ng-repeat="item in items" class="item-button-right">
{{ item.Info }}
<button class="button button-positive" ng-click="Accept(item)">
<i class="icon ion-checkmark"></i>
</button>
<button class="button button-assertive" ng-click="Reject(item)">
<i class="icon ion-close"></i>
</button>
</ion-item>
</ion-list>
The desired behavior I'm trying to get is show some small blurb of info on the left and present two options on the right.
I have a Simple Self Contained Correct Example here: http://codepen.io/anon/pen/vzLob
I recently ran into this problem and discovered that Ionic provides a class called .buttons which when wrapped around multiple button elements positions them side by side.
This avoids having to use !important which in general is considered bad practice in CSS.
Here's an example of the code which worked for me:
<div class="item item-button-right">
List item 1
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</div>
Also noticed your code pen attachment so thought i'd update that too to demonstrate.
http://codepen.io/anon/pen/bNjypG
Here is an example
<ion-view ng-controller="inspectorsCtrl as vm">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat=" item in vm.items" class="item-icon-right">
{{item.info}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try like this:
First take one div class and then take 2 buttons inside the div tag.
<div class="buttons" >
<button class="button button-icon" >
<i class = "icon ion-funnel"></i>
</button>
<button class="button button-icon" >
<i class = "icon ion-android-document"> </i>
</button>
</div>
The solution using .buttons works only if the text is not long or if there are only two icons.
Along with flexbox it works in any situation.
<ion-list>
<ion-item
ng-repeat="item in items"
class='item-multiple-buttons'
>
<div class="buttons buttons-left">
<button class="button button-icon ion-checkmark-circled"></button>
<button class="button button-icon ion-information-circled"></button>
</div>
<div class="item-content" >
{{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
<div class="buttons buttons-right">
<button class="button button-icon ion-close-circled"></button>
<button class="button button-icon ion-help-circled"></button>
<button class="button button-icon ion-minus-circled"></button>
<button class="button button-icon ion-plus-circled"></button>
</div>
</ion-item>
</ion-list>
SCSS:
/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;
// From _button.scss, hardcoded value
$button-icon-padding: 6px;
.item {
&.item-multiple-buttons{
display: flex;
padding: 0 $item-padding;
.item-content{
flex: 1;
padding: $item-padding 0;
}
.buttons{
display: flex;
&.buttons-left{
margin-right: $item-padding - $button-icon-padding;
}
&.buttons-right{
margin-left: $item-padding - $button-icon-padding;
}
.button{
font-size: $item-icon-font-size;
}
}
}
}
Codepen: http://codepen.io/M1k3l/pen/PWBdOB