How to show scrollbar in popover content?


#1

I have implemented popover using ionic native.That’s working fine.I gave some height to popover but my content is more than that with in popover.I am able to scroll the content but only thing is I am unable show scroll bar for users.


#2

Have you tried enabling ion-scroll inside your ion-content?
Documentation: Scroll


#3

@NorthFred

<ion-content>
	<ion-scroll scrollX="true">
		<ion-list *ngFor="let eachVisitedPlace of offersCommonData.previouslyVisitedBeaconsAndGeofences">
			<button ion-item (click)="showPreviousLocationOffers(eachVisitedPlace)">
				{{eachVisitedPlace.locationName}}
			</button>	
		</ion-list>
	</ion-scroll>	
</ion-content>

I tried with above code still it doesn’t work.

I am actually giving max-height for popover.I tried with removing max-height true still I am facing same issue.

.popover-md .popover-content {
    max-height: 40%;
}

Thanks,
Sathish


#4

scrollX works horizontally. You need scrollY, and then make sure to update your css with:

ion-scroll { white-space: nowrap; }


#5
<ion-content>
	<ion-scroll scrollY="true">
		<ion-list *ngFor="let eachVisitedPlace of offersCommonData.previouslyVisitedBeaconsAndGeofences">
			<button ion-item (click)="showPreviousLocationOffers(eachVisitedPlace)">
				{{eachVisitedPlace.locationName}}
			</button>	
		</ion-list>
	</ion-scroll>	
</ion-content>


	.list-md{
		margin: 0px;
		border-bottom: 1px solid lightgray;
	}
	ion-scroll { white-space: nowrap; }

}

I changed the css and html.Still it’s not showing scrollbar.


#6

Could you still try adding the height to the css?
And what about the browser - does it work there?