Ionic View One Fixed, One Scrolling Section - ionic-framework

OK so I have the following code:
<ion-view hide-back-button="true", title="Test">
<ion-content>
<ion-slide-box>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
</ion-slide>
</ion-slide-box>
<div class="bar bar-dark">
<h1 class="title">Feed</h1>
</div>
<ion-list style="padding: 1px;">
<ion-item ng-repeat="test in tests" href="#/detail/{{work.id}}">
<br>
<br>
<h2>{{test.name}}</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I want the list to scroll independently of the rest of the view and for the bar and nothing above it to scroll -- ie I want them to be fixed. Any help would be greatly appreciated.

Simple fix, just use two ion-scrolls: see it here: http://play.ionic.io/app/85e2270b0b33
<!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="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-view hide-back-button="true", title="Test">
<ion-scroll>
<ion-slide-box>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
</ion-slide>
<ion-slide>
<img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
</ion-slide>
</ion-slide-box>
<div class="bar bar-dark">
<h1 class="title">Feed</h1>
</div>
</ion-scroll>
<ion-scroll style="height: 500px">
<ion-list>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
<ion-item>
Hello
</ion-item>
</ion-list>
</ion-scroll>
</ion-view>
</body>
</html>

Related

IONIC 5, unable to pass values to TS file with ngModel

need some help with IONIC 5..i want to add on click function to each of the ion item...i want a form to appear below when any of the raio item is clicked
I have tried to use (ng-click)="selection(item.id)"
and also tried
none seem to work as expected.
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
Use (click)="method you want"
And in ionic 5, using text-center is deprecated,i think you can use class="ion-text-center" instead
In yours ts file:
export yourclass{
selectedValue:any;
}
In you html file:
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio [(ngModel)]="selectedValue" value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center >
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio [(ngModel)]="selectedValue" value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
<div *ngIf="selectedValue=='value u want from radio"></div>
I was finaly able to get it done for IONIC 5 using the method below
ON .ts file i did it like this, using (ionChange)="segmentChanged($event)" on the ion-radio-group
category:any = "day";
then on HTML..hope it helps someone
<ion-label>Select Biller</ion-label>
<div class="cat-holder">
<ion-radio-group (ionChange)="segmentChanged($event)"
[value]="category">
<div class="rad-item" text-center >
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport" name="transport" ></ion-radio>
</ion-item>
<ion-label>Dstv</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/gotv.png" alt="">
<ion-radio value="Gotv" name="gotv" ></ion-radio>
</ion-item>
<ion-label>Gotv</ion-label>
</div>
</ion-radio-group>
</div>

Ionic how to disable slide on swipe screen?

I have a slide. I want to do slide on button which is done. But i still can slide by gesture. I need to remove my slides from gesture. only slide will do from buttons. Any one can help how can i disable it from gesture ?
Here is my html code
<ion-content>
<div class="slide-box">
<ion-slides pager="true" >
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="../../assets/img/welcome.jpg"/>
<h2>
AI Generated Photos
</h2>
<ion-label color="gray" >
All the photos are generated with artificial intelligence
</ion-label>
</div>
</ion-slide>
<!-- Slide 2 -->
<ion-slide>
<div>
<img src="../../assets/img/welcome.jpg"/>
<h2>
Download Your Photos
</h2>
<ion-label color="gray" >
Select the photo you like to download the photos by buying them
</ion-label>
</div>
</ion-slide>
<!-- Slide 3 -->
<ion-slide>
<div>
<img src="../../assets/img/welcome.jpg" />
<h2>
Follow Us Instagram
</h2>
<ion-label color="gray" >
You can follow us on instagram to download the photos for free
</ion-label>
</div>
</ion-slide>
</ion-slides>
</div>
</ion-content>
<ion-footer style="margin-bottom: 7%;" no-border>
<div style="display: flex; justify-content: center;" (click)="next(slides)" *ngIf="next1">
<ion-button expand="block" class="btn">NEXT</ion-button>
</div>
<div style="display: flex; justify-content: center;" (click)="nextd(slides)" *ngIf="next2">
<ion-button expand="block" class="btn">NEXT</ion-button>
</div>
<div style="display: flex; justify-content: center;" (click)="login()" *ngIf="start" >
<ion-button expand="block" class="btn">GET STARTED</ion-button>
</div>
</ion-footer>
I just want to do that the user can not slide from screen. they can just do it by buttons
Try this way.It will helps You.
HTML:
<ion-slides pager="true" #slider>
Your code here.....
</ion-slides>
TS:
import { Component ,ViewChild} from '#angular/core';
export class HomePage {
#ViewChild('slider') slider;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad(){
this.slider.onlyExternal = true;
}
demo link:https://stackblitz.com/edit/ionic-p48vuq

ionic 4 ion-slider lock at the last slide

I'm developing an ionic 4 mobile app with an ion-slider that slides horizontally. the slider is working. but I couldn't stop the sliding at the last slide. I need to lock my last slide at the slider.
<div style="float: left; width: 100%">
<ion-slides [options]="sliderConfig" style="width: 100%" #slides>
<ion-slide style=" margin-left: -30%">
<div style="float:left">
<!-- <ion-card style="width: 180px; height: 200px;" >
<ion-card-content> -->
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/f1.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<!-- <img src="../../../assets/food.jpg" style="width:220px; height:200px"/> -->
<ion-label>
Promo
</ion-label>
<!-- </ion-card-content>
</ion-card>
-->
</div>
</ion-slide>
<ion-slide style="margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/food.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
New
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/sri.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Sri Lankan
</ion-label>
</div>
</ion-slide>
Please try the below code. I did some modification.
<div style="float: left; width: 100%">
<ion-slides style="width: 100%" #slides>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
App Url = enter link description here
editor Url = enter link description here
You have used margin left 25%. that is the issue i think

Multiple conditional ion-header-bar 's overlapping ion-content

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>

Ionic nav back button is not displaying

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