Is it possible to customize the popup info window that appears when a marker is clicked, without having a scrollbar on the right if the content overflows?
Visit this link for an image (image didn't load when using the image template)
I've attempted to add overflow: scroll to all parent containers, as that seemed to be the only difference (refer to this example).
I created a short clip showcasing what partially resolved the issue. View the clip here
Here's the code snippet for the markers:
<agm-marker *ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"
[markerDraggable]="m.draggable">
<agm-info-window>
<div class="popup-info-container">
<div class="popup-header-container">
<strong>InfoWindow content</strong>
</div>
<div class="popup-body-container">
<strong>InfoWindow content</strong>
</div>
</div>
</agm-info-window>
</agm-marker>
CSS styling for the popup:
.popup-info-container {
height: 400px;
width: 300px;
background-color: red;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
&::-webkit-scrollbar {
display: none;
}
}
.agm-info-window-content {
overflow: scroll;
}
.popup-header-container {
height: 20%;
width: 95%;
background-color: blue;
}
.popup-body-container {
height: 75%;
width: 95%;
background-color:whitesmoke;
}
The desired outcome should resemble this result, where the scrollbar fades out.