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;
}
Related
I have problem with ionic grid within slides. I have items of product where i put on ion-grid, and ion-grid is within slides, then if i rotate my android device, ion-grid is not responsive, so the image is cut off
<ion-col class="hide-xs" size-sm="7" >
<ion-slides >
<ion-slide *ngFor="let products of listProduct" >
<app-ajax [ajax]="ajax"></app-ajax>
<ion-grid>
<ion-row>
<ion-col size="6" sizeMd="4" sizeXl="3" *ngFor="let item of products">
<div class="image-container" *ngIf="item.photo!==''">
<ion-img *ngIf="item.idproduct !==0" width="100%" height="100%"
[src]="'data:image/jpeg;base64,' + item.foto64" (click)="presentModal(item)"></ion-img>
</div>
<div class="fontImage" (click)="presentModal(item)">{{item.nmproduct}}</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
</ion-col>
if i removed ion-slides, ion-grid responsive properly, so the image is not cut off. how to solve this? thankyou
you can give this in component.ts
#ViewChild('slides',{static: true}) slides;
#HostListener('window:resize')
onResize() {
setTimeout(() => this.slides.update(), 50);
}
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;
}
<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've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference
I would like to swipe sideways between sections of a questionnaire. Each section has a header and a number of answered questions. I would like to add a vertical scroll on the questions, but can't figure out how to get it working. Here is my view:
<ion-view title="{{vm.title}}">
<ion-slide-box show-pager="true" class="has-header">
<ion-slide ng-repeat="s in vm.sections">
<ion-item class="item-royal">
{{s.Heading}}
</ion-item>
<ion-scroll>
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">
{{q.Text}}
</div>
<div class="item">
{{q.Answer}}
</div>
</div>
</ion-scroll>
</ion-slide>
</ion-slide-box>
</ion-view>
I found a solution that fixes the specific problem I was having, but creates another. I added a div to the ion-scroll and set heights on the ion-scroll and the new div:
<ion-scroll style="height:300px">
<div style="height:100%">
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">
{{q.Text}}
</div>
<div class="item">
{{q.Answer}}
</div>
</div>
</div>
</ion-scroll>
This causes two problems:
I don't want to specify the height of the ion-scroll in pixels - I'd like it to fill the remaining space in the window.
The pager appears in front of the scroll window - I'd like it to appear below.
EDIT Then I found a second solution:
<ion-view title="{{vm.title}}">
<ion-slide-box show-pager="true" class="has-header"
style="position:absolute; bottom: 0;left: 0;right: 0; ">
<ion-slide ng-repeat="s in vm.sections">
<ion-item class="item-royal">
{{s.Heading}}
</ion-item>
<ion-content>
<div class="card" ng-repeat="q in s.Questions">
<div class="item item-divider">
{{q.Text}}
</div>
<div class="item">
{{q.Answer}}
</div>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-view>
Changes made
Set the style of the ion-slide-box to position:absolute; bottom: 0;left: 0;right: 0; (The top is already specified by the has-header class)
Use ion-content around the part I want to scroll instead of the ion-scroll and the div
Live with the pager in front. It looks fine!
Edit 2
I'd also recommend using Crosswalk if you are having scroll problems with older Android devices.
For Ionic 4 get it to scroll vertically with some css.
<ion-slide><div class="scrollVertically">stuff to scroll...</div></ion-slide>
.scrollVertically{
overflow: auto;
height: 100vh;
}
I have solved this with this simple css:
ion-slides { height: initial; }
For ionic 2, you need to use <ion-slides>. <ion-slide-box> has been deprecated.