I am developing a hotel booking app for mobile and desktop
this this the screenshot
my problem this when I hover mouse over the card list and scroll using my scroll wheel the whole page is scrolling
How to prevent this ?
I tried but it not working
also gave slot=“fixed” in mapelement div , but map stop loading
also gave scroll-“false” in mapelement div , but still map scrolls
My code
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Hotel Location</ion-title>
</ion-toolbar>
</ion-header>
<ion-content scroll="false" slot="fixed">
<ion-grid >
<ion-row>
<ion-col size="2">
<ion-list >
<ion-item *ngFor="let hotel of hotels">
<ion-card >
<ion-img src="{{hotel.image}}" ></ion-img>
<ion-card-header>
<ion-card-title>{{hotel.hotelName}}</ion-card-title>
<ion-card-subtitle>Chennai</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label>
<h2>Economy</h2>
<h3>2 Beds | 0 Balcony</h3>
<p>Listen, I've had a pretty messed up day...</p>
</ion-label>
<ion-badge style="text-align: end" color="danger" slot="end">$100</ion-badge>
</ion-item>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-col>
<ion-col scroll="false" size="10">
<div #mapElement class="map"></div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
.map {
height: 95%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
export class ListHotelDesktopPage implements OnInit, AfterViewInit {
latitude: any;
longitude: any;
@ViewChild('mapElement',null) mapNativeElement: ElementRef;
hotels: any;
map: any;
constructor(private router: Router,private httpN: HTTP,http: HttpClient,private geolocation: Geolocation,public modalCtrl : ModalController,public ngZone: NgZone) {
const url: string = 'https://jsonbase.com/ragesh/getHotels';
http.get(url).subscribe((data: any) => {
console.log('get', data.hotels);
this.hotels = data.hotels;
}, (error) => {
console.log('get - ERROR', error);
});
}
//------------------
ngOnInit() {
}
ngAfterViewInit(): void {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
this.map = new google.maps.Map(this.mapNativeElement.nativeElement, {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
const pos = {
lat: this.latitude,
lng: this.longitude
};
this.map.setCenter(pos);
}).catch((error) => {
console.log('Error getting location', error);
});
}
async openModal(){
const modal = await this.modalCtrl.create({
component: ModalPagePage
});
return await modal.present();
}
markMap(hotel: any)
{
//alert(name);
const pos = {
lat: hotel.hotelLatLng.lat,
lng: hotel.hotelLatLng.lng
};
const icon = {
url: 'assets/icon/favicon.png', // image url
scaledSize: new google.maps.Size(50, 50), // scaled size
};
const marker = new google.maps.Marker({
position: pos, //marker position
map: this.map, //map already created
title: hotel.hotelName,
icon: icon //custom image
});
const contentString = '<div id="content" style="height: 100%;margin: 10;padding: 10;" >' +
'<h1 id="firstHeading" class="firstHeading">'+hotel.hotelName+'</h1>' +
'<div id="bodyContent" style="height: 100%;margin: 10;padding: 10;">' +
'<img src="'+hotel.image+'" width="200">' +
'<ion-button color="primary" id = "'+hotel.hotelName+'">BOOK Now</ion-button> '+
'<p> '+hotel.hotelDescription+' </p>' +
'</div>' +
'</div>';
let infoWindow2 = new google.maps.InfoWindow({
content : contentString
});
google.maps.event.addListenerOnce(infoWindow2, 'domready', () => {
document.getElementById(hotel.hotelName).addEventListener('click', () => {
// this.openModal();
this.router.navigateByUrl('/hotel-details');
});
});
marker.addListener('click', function() {
infoWindow2.open(this.map, marker);
});
}
}
Please help me make only card list scrollable