I'm using Ionic 5 here, and iIve noticed that when I have a number of items in a list in the slide on ion-slide 1, and a few in the next ion-slide, when I transition between the two programatically, the slide with fewer items in starts way below the actual content it holds.
It's like the slides share a Y scroll position during the transition.
The slides, two of them, populated with some ion-items ( and sliding items ) nested inside an ion-list, they are "swiped" by the interactions with the ion-segment-buttons.
Is there a way to either scroll to the top of the next slide rapidly so that it's not noticed during the transition, or, someother code voodoo I need to add to stop slide 2 from starting at the Y point that slide 1 transitions from..
edit: a github repo of the code in action, scroll to the bottom of the long list, then click Group2 and the next slide starts from the same Y point as the previous.
https://github.com/p4u1d34n/ionicEmpty
<ion-slides #slider class="swiper-no-swiping">
<ion-slide>
<ion-list>
<ion-item-sliding *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; let i = index">
<ion-item (click)="doSomething(item)">
<ion-avatar slot="start">
<img src="image.png">
</ion-avatar>
<ion-label>
<h2>Title for item</h2>
<h3>Another line here</h3>
<p class="ion-text-wrap">
Some random stuff here
</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" (click)="removeAction(item)">
Remove
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item-sliding *ngFor="let item of [0,1,2,3]; let i = index">
<ion-item (click)="doSomething(item)">
<ion-avatar slot="start">
<img src="image.png">
</ion-avatar>
<ion-label>
<h2>Title for different item</h2>
<h3>Another line here</h3>
<p class="ion-text-wrap">
Some random stuff here
</p>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" (click)="removeAction(item)">
Remove
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-slide>
<ion-slides>
<ion-segment (ionChange)="changeSegment($event)" [value]="this.sliderindex">
<ion-segment-button *ngFor="let seg of this.sliderindex" [value]="seg">
<ion-label>{{seg}}</ion-label>
</ion-segment-button>
</ion-segment>
declare var window;
#ViewChild('slider',{static:false}) slider:IonSlides;
private view: any;
public sliderindex:any = ['Group1','Group2'];
changeSegment(ev: any) {
this.view = this.sliderindex.indexOf(ev.detail.value);
this.slider.slideTo(this.view,250).then(()=>{
<!-- Trying to get experimental here... -->
<!-- window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
}); -->
});
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<script type="text/javascript" src="assets/js/cdlutils.js"></script>
<script type="text/javascript" src="assets/js/cdl-utils-ui.js"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
</html>
I need to add these bits..
import { IonContent } from '#ionic/angular';
#ViewChild(IonContent) content: IonContent;
and change the function to this
changeSegment(ev: any) {
this.view = this.sliderindex.indexOf(ev.detail.value);
this.slider.slideTo(this.view,250).then(()=>{
this.content.scrollToTop(0)
});
}
Related
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
Playing around with ionic and found a strange behavior on the first click on `ion-radio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="card">
<div class="item item-divider">Social media</div>
<ion-radio ng-model="choice" ng-value="''" icon="icon ion-social-facebook">facebook</ion-radio>
<ion-radio ng-model="choice" ng-value="''" icon="icon ion-social-twitter">twitter</ion-radio>
<ion-radio ng-model="choice" ng-value="''" icon="icon ion-social-youtube">youtube</ion-radio>
</div>
</ion-content>
</ion-pane>
</body>
</html>
You can give it a try at
http://play.ionic.io/app/9056e06acc35
The problem may be:
ng-model="choice" ng-value="''"
You have set ng-value as empty, so when click on any option.. choice is set to empty.
so,now..it try to search ng-value as empty till end in options and as all are empty it set last one as selected.
try to set ng-value="twitter", means set some value to ng-value.
<ion-radio ng-model="choice" ng-value="'fb'" icon="icon ion-social-facebook">facebook</ion-radio>
<ion-radio ng-model="choice" ng-value="'twit'" icon="icon ion-social-twitter">twitter</ion-radio>
<ion-radio ng-model="choice" ng-value="'youtube'" icon="icon ion-social-youtube">youtube</ion-radio>
I'm fighting with header bars.
This snippet works perfectly fine:
<ion-pane>
<ion-header-bar class="bar-balanced">
<h1 class="title">mytitle</h1>
</ion-header-bar>
<ion-view view-title="">
<ion-content>
MyContent
</ion-content>
</ion-view>
</ion-pane>
Once I add two additional header bars for different conditions, my ion-content module doesn't get the has-header class and my header bar overlaps my content.
As said, this crashes my design:
<ion-pane>
<ion-header-bar class="bar-balanced" ng-show="conditionA()">
<h1 class="title">mytitle1</h1>
</ion-header-bar>
<ion-header-bar class="bar-balanced" ng-show="conditionB()">
<h1 class="title">mytitle2</h1>
</ion-header-bar>
<ion-header-bar class="bar-balanced" ng-show="conditionC()">
<h1 class="title">mytitle3</h1>
</ion-header-bar>
<ion-view view-title="">
<ion-content>
MyContent
</ion-content>
</ion-view>
</ion-pane>
Setting the has-header class manually doesn't solve the problem. The class gets removed by angular/ionic.
What am I doing wrong? It should be possible to set different headers, shouldn't it?
Thanks for your help in advance.
Change ng-show to ng-if and it works:
(P.S.: see the snippet in full screen)
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope){
$scope.head = 1;
$scope.change = function(n) {
$scope.head = n;
}
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl" ng-init="head=1">
<ion-pane>
<ion-header-bar class="bar-balanced">
<h1 class="title">mytitle1</h1>
</ion-header-bar>
<ion-header-bar class="bar-balanced" ng-if="head==1">
<h1 class="title">mytitle1</h1>
</ion-header-bar>
<ion-header-bar class="bar-positive" ng-if="head==2">
<h1 class="title">mytitle2</h1>
</ion-header-bar>
<ion-header-bar class="bar-assertive" ng-if="head==3">
<h1 class="title">mytitle3</h1>
</ion-header-bar>
<ion-content >
<ion-list>
<ion-item>
<button class="button button-positive button-primary" ng-click="change(1)">to head 1</button>
</ion-item>
<ion-item>
<button class="button button-positive button-primary" ng-click="change(2)">to head 2</button>
</ion-item>
<ion-item>
<button class="button button-positive button-primary" ng-click="change(3)">to head 3</button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
I am working on an Ionic App and I don't know why the list item is not visible why it is under the title tab?
Here is the link of code.
https://jsfiddle.net/jneypysb/
I used <ion-header-bar> and <ion-content> with has-header class and I resolved.
Because you declared <body ng-app="Hungroo"> it's necessary to define those module.
It follows a complete example:
angular.module('Hungroo', ['ionic']);
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="Hungroo">
<ion-header-bar class="bar bar-header bar-royal">
<button class="button button-icon icon ion-navicon"></button>
<div class="h1 title">title</div>
<button class="button button-icon icon ion-settings"></button>
</ion-header-bar>
<ion-content class="has-header">
<div class="padding">
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
First Things First!
</div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</label>
</div>
</div>
</ion-content>
</body>
</html>
Started with Ionic but want to add a new button to the right of my apps header.
However, in my index.html I only have this:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And cannot find how to edit the header? Im guessing its generated in a template somewhere, but no searching is returning anything.
If you need a working example... here it is:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
check this codepen
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
Available sides: primary, secondary, left, and right