I have two ionic slides, each containing a regular list.
My problem is that each time I scroll on one of them, the other scrolls at the same time.
Is there a way of making each list scroll individually?
My code somewhat like this:
<ion-content>
<ion-slides>
<ion-slide>
<ion-list>
...
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
...
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
Figured it out.
I made it so the ion-content would be inside the slide, so that I could have my ion-lists separated :
<ion-slides>
<ion-slide>
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
</ion-slide>
<ion-slide>
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
</ion-slide>
</ion-slides>
Also, I added this css:
ion-slides, ion-slide {
height: 100% !important;
}
.swiper-container {
margin: unset;
}
Related
Is it possible, I guess through some CSS manipulation, to make the height of the last ion-card equal to the remaining height of the ion-content inside the following Vue2 template?
<template>
<ion-app>
<ion-page>
<ion-content>
<ion-card>
<ion-item button>
<ion-thumbnail slot="start">
<img src="~assets/svg/QR-code.svg" />
</ion-thumbnail>
<ion-label> Generate a new QR Code. </ion-label>
</ion-item>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title>Header Test</ion-card-title>
</ion-card-header>
<ion-card-content>Balance €</ion-card-content>
</ion-card>
<ion-card class="last-orders-card">
<ion-card-header>
<ion-card-title>Header 1</ion-card-title>
</ion-card-header>
<ion-list class="last-orders-list">
<ion-item v-for="item in items" :key="item.id">
<ion-label>
<ion-text color="primary">
<h3>Test</h3>
</ion-text>
</ion-label>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
</ion-page>
</ion-app>
</template>
I've added the following css classes in order to make the content inside the card (in this case the ion-list) scrollable.
.last-orders-card {
max-height: 100%;
display: flex;
flex-flow: column;
}
.last-orders-list {
overflow: scroll;
}
I'd like to know if I can fit the height of the card to the remaining space without changing the max-height. I can put it to 50% for instance but that changes depending on the screen size and especially if there are some more cards on top (which is the case but I've omitted them from the snippet for brevity).
I have this html in my ionic project
<ion-header>
<ion-toolbar mode="ios">
<ion-searchbar>
</ion-searchbar>
<ion-title>
</ion-title>
</ion-toolbar>
<ion-list class="m-0-p-0">
<ion-item *ngFor="let user of users">
</ion-item>
</ion-list>
</ion-header>
<ion-content scrollY="false">
<ion-grid>
<ion-row class="centered">
....
</ion-row>
</ion-grid>
</ion-content>
this is my centered class:
.centered{
position:fixed ;
width:100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
So, when i go into the searchbar, when the keyboard is showing up, the content of the center is moving up. I searched on the web for solutions but it seems that things have changed in ionic 4 and i cannot do: Keyboard.disableScroll(true).. or can I?
Please, I would appreciate some help. I'm sure is pretty simple but I can't get over the ionic 4 classes that they put behind the elements, and I need an ion-card to be small.
This is my first time on StackOverFlow. Here is my code:
<ion-content color="tertiary" padding margin>
<ion-card color="medium" >
<ion-card-content>
<ion-title>Elija su Zona</ion-title>
<ion-list>
<ion-item *ngFor="let item of zonas">
<ion-label (click)=gotoHomeByZona(id)>{{item.nombre}}</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
<div style="width:80%; margin: 0 auto">
<ion-card color="medium" >
<ion-card-content>
<ion-title>Elija su Zona</ion-title>
<ion-list>
<ion-item *ngFor="let item of zonas">
<ion-label (click)=gotoHomeByZona(id)>{{item.nombre}}</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>
<ion-content >
<ion-slides loop #Slides>
<ion-slide >
<h2>Slide 1</h2>
</ion-slide>
<ion-slide >
<h2>Slide 2</h2>
</ion-slide>
<ion-slide >
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
<button ion-button full>login</button>
</ion-content>
When I use the code above, I have to scroll down to see the button.
Is there any way to force all the components to be on the same page ?
Add this to your page SCSS:
.scroll-content {
display: flex;
flex-direction: column;
ion-slides {
display: flex;
}
}
I have a couple of slides which have dynamic content that is added to them. The problem is the content inside of the slides doesn't scroll. So if I have a lot of items only some show and there is no ability to slide. How can I make it so the content in my lists slides inside of their slides?
<ion-content>
<ion-slides (change)="onSlideChanged($event)">
<ion-slide >
<ion-list>
<ion-item *ngFor="#item of items1; #i = index">
<h2>{{item}</h2>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item *ngFor="#item of items2; #i = index">
<h2>{{item}</h2>
</ion-item>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
I have the same problem,and I solve it like this:
<ion-slides style="height: auto">
<ion-slide *ngFor="#item of items">
<h1>{{item.title}}</h1>
<p>{{item.description}}</p>
</ion-slide>
</ion-slides>
Looks like you need to wrap your long content in a <scroll-content> inside of each <ion-slide>, for example:
<ion-slides>
<ion-slide *ngFor="#item of items">
<scroll-content>
<h1>{{item.title}}</h1>
<p>{{item.description}}</p>
</scroll-content>
</ion-slide>
</ion-slides>
Note, you may need to do a text-align:left if you want the text to not be centered, since thats the default for content in <ion-slide>.
Setting style='height:auto' as stated in booyoungxu's answer disables sliding after you swipe on the first slide. style='overflow:scroll' works best.
<ion-slides style="height: auto">
...
</ion-slides>
In controller, put:
ngAfterViewInit() {
this.slides.autoHeight = true;
}