After creating an agm-info-window with an image and a small text (tittle), here is the code:
<agm-marker [latitude]="lat3" [longitude]="lng3" [iconUrl]="icon">
<agm-info-window [disableAutoPan]="true" [isOpen]="true">
<div routerLink="/sight/2">
<img src="assets/mesta/tvrdjava.jpg" alt="Image" width="80" height="80"> <br>
<span class="window-title"> Bubanj </span>
</div>
</agm-info-window>
</agm-marker>
The outcome can be seen in this image link.
To customize the info window CSS: change background color, remove close button (X), and center align text as per below:
Check out the desired effect in this image link.
Applying CSS changes directly in Chrome's inspector provided the desired result. CSS used:
/* Remove the X, close button */
.gm-ui-hover-effect {
display: none;
}
.gm-style-iw {
padding: 0;
background-color: #AAAAAA;
text-align: center;
color: white;
}
/* remove overflow scroll */
.gm-style-iw-d {
overflow: none;
}
However, when attempting to apply the same CSS changes within the component's own CSS file, no actual changes occurred. This issue leaves a question of why the CSS isn't functioning as expected.
With minimal alterations needed, utilizing snazzy info window doesn't seem necessary. The goal remains to implement these minor tweaks successfully. Is this possible? What could be causing the CSS to not take effect?