I need to have a fixed element on a page, and then a scrollable list.
I added a ion-content inside the first ion-content. But it doesn't scroll.
<ion-view title="Bayonne" hide-back-button="true" id="page5" style="background-color:#1B463C;">
<ion-content scroll="true" padding="false" class="has-header">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
<ion-content id="contentInside">
<ion-list id="bayonne-list2">
<ion-item class="item-thumbnail-left " id="bayonne-list-item12" ui-sref="rempart">
<img src="img/S6OgBxiMQdSttmcgQNFJ_old.png">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item11" ui-sref="rempart">
<img src="img/0CoPf6OkTGWKNa0SUvI1_rempart.jpg">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left item-icon-right " id="bayonne-list-item7">
<img src="img/St3jeK3kRVC7bY3TODRt_tour.png">
<h2>Château-Vieux</h2>
<i class="icon ion-android-walk"></i>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item13">
<img src="img/1E4YdOePR62V8ZoECOuL_cloitre.jpg">
<h2>Cloître</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item5">
<img src="img/sDFRnANETvaagk5B01nZ_bayonne_cathedrale_et_cloitre_03-05-2012___11.JPG">
<h2>Cathédrale</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item6">
<img src="img/n3OwTRCOTDSW1V7q2Z3R_reduit.jpg">
<h2>Place du Réduit</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item14">
<img src="img/qeuF4erGTQOtqvgTUOD1_escalier.jpg">
<h2>Escaliers</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-content>
You cannot have a ion-content inside another ion-content it's not a good practice.
If you want a content to be static you can use ion-header with subheader class.
<ion-header class="bar bar-subheader">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
Now the image and button will be static in the header.
NOTE:
It is must to include has-subheader class in ion-content.
<ion-content class="has-subheader">
"Your content goes here"
</ion-content>
Related
I am trying to show the button on the bottom of page but the issue is its not showing in bottom just showing on the middle not in end.
Here is my .html code
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
</ion-slide>
</ion-slides>
</div>
</ion-content>
.scss
.toolbar-background {
border: none;
}
.btn{
width: 90%;
height: 50px;
position : absolute;
bottom : 0;
left: 5%;
}
ion-slide {
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.bar-header {
background-color: red($color: #000000);
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
I try to set height of slide but dont know why its not working seems like button is in the end of slide but the height is less thats why button is showing in middle.
Try placing your button outside of the <ion-slides> component.
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
</ion-slide>
</ion-slides>
<!-- put your button here -->
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
<!-- put your button here -->
</div>
</ion-content>
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
I'm using Ionic version 4 and I want my login form in the application to be vertically centered.
I've tried many solutions present in stack overflow but looks like all works for Ionic version 3 and also tried some of the CSS tricks like margin 0 auto; and
display:flex;
justify-content:center !important;
align-content:center !important;
But didn't work for me.
This is how my forms looks like, I'm using bootstrap additionally and have no custom css classes added into the template.
Here's my template code.
<ion-content color="light">
<ion-grid>
<ion-row class="ion-justify-content-center">
<ion-col size-xs="9" size-md="9">
<form>
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Enter AccountID"
autocomplete="off"
/>
</div>
<div class="form-group">
<input
type="email"
class="form-control"
placeholder="Enter Email"
autocomplete="off"
/>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
placeholder="Enter Password"
autocomplete="off"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
I did it using this styles
ion-grid{
height: 100%;
}
ion-row{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
My code works in Ionic v4
ion-grid{
height: 100%;
}
ion-row{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<ion-content>
<ion-grid class="ion-text-center">
<ion-row>
<ion-col size="12">
blaaaaaaaaaa
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Try this code:
.vcenter{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
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
I'm working on an ionic application. I’m trying to use an infinite-scroll item in a custom component that contains a segement with two Lists that are showen according to the user's choices.
This is the code of the component :
<ion-content *ngIf="show">
<div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
<ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
MOST TRUSTED
</ion-segment-button>
<ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
LATEST
</ion-segment-button>
</ion-segment>
</div>
<div no-margin no-padding [ngSwitch]="chx">
<ion-list no-margin no-padding *ngSwitchCase="'most'">
<post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite2($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
<ion-list no-margin no-padding *ngSwitchCase="'recent'">
<page-post-card no-margin *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
</page-post-card>
<ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="{{'BUBBLES' | translate}}"
loadingText="{{'LOADING' | translate}}">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</div>
</ion-content>
The component is used in an ionic page like this:
<ion-content no-padding>
<topicsearch [show]="showresult"></topicsearch> <!-- This is the custom component -->
<div *ngIf="!showresult" >
<ion-list *ngFor="let top of topics">
<ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
</ion-list>
</div>
</ion-content>
The problem is that the infinite-scroll doesn’t fire when scrolling down in the custom component.
Does anyone have a solution for that ?
Your component using ion-content which including inside another ion-content. Remove ion-content from component.
And also doInfinite function will be declared inside the component ts.