Scroll in card instead of content

Ionic Framework ionic-v3
1

Hi,

i would like to create a page with two cards that contain each a scrollable list but I’d like to have them both visible without scrolling at 50% available height for each.
If I do it like so:

<ion-content padding>
<ion-card>
	<ion-card-content>
		<ion-title>{{ title0 }}</ion-title>	
		<ion-list>
			<ion-item *ngFor="let x of scores0">
				<ion-label>{{ x.name }}</ion-label>
				<ion-label>{{ x.score }}</ion-label>
				
			</ion-item>
	  	</ion-list>
	</ion-card-content>
</ion-card>

<ion-card>
	<ion-card-content>
		<ion-title>{{ title1 }}</ion-title>	
		<ion-list>
			<ion-item *ngFor="let x of scores1">
				<ion-label>{{ x.name }}</ion-label>
				<ion-label>{{ x.score }}</ion-label>
			</ion-item>
	  	</ion-list>
	</ion-card-content>
</ion-card>
</ion-content>

the whole page scrolls.
So how can I get just the lists to scroll?

thanks a lot!

2

@zantafio Have you tried using ion-scroll inside the cards? :+1:

http://ionicframework.com/docs/v2/api/components/scroll/Scroll/

1 Like
3

i did, like so:

    <ion-card>
	<ion-card-content>
		<ion-title>{{ title0 }}</ion-title>	
		<ion-scroll scrollY="true"> 
			<ion-list>
				<ion-item *ngFor="let x of scores0">
					<ion-label>{{ x.name }}</ion-label>
					<ion-label>{{ x.score }}</ion-label>
				</ion-item>
	  		</ion-list>
		</ion-scroll> 
	</ion-card-content>
</ion-card>

but now the lists disappear completely.

4

@zantafio In the .scss file you have to set a fixed height for the scroll to work.

ion-scroll {
height: 100px;
}

3 Likes
5

@zantafio Do keep in mind though, vertical scrolling on mobile devices is considered particularly bad practice. On desktops as well, epecially if the scrollable areas width is not minimal. The problem is it hampers user experience since the intuitive core gesture of vertical scrolling is getting hijacked by an embedded vertical scrolling area by mistake.

If you are using vertical scrolling, I advise you to reconsider if your design could do with horizontal scrolling instead (which is fine).

6

thank you. it was a hard time to convince the client. but now everything is ok and i dont need scroll within scroll anymore … :slight_smile: