CODEWITHSUNDEEP
cssangulargoogle-mapsagm-map
IkePr
IkePr

Reputation: 930

Agm info window custom css

I have created a agm-info-window that has an image and a small text (tittle):

<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>

This is the result:

enter image description here

I want to change the info window css. - The background color, remove the close button (x) and put the text in the center. Like so:

enter image description here

I get the correct effect when I set the CSS in Chrome's inspector. I set:

/* 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;
}

But when I put this same css in the components css, it doesn't change at all, nothing changes.

I don't have a lot of changes, so I would prefer not to use snazzy info window. I just want these small changes to the window. Is it possible ? Why is the css not working ?

Upvotes: 0

Views: 2484

Answers (2)

Urvisha Seladiya
Urvisha Seladiya

Reputation: 19

Use this CSS in styles.css as component css is having low priorities enter image description here

Upvotes: 1

malik umar
malik umar

Reputation: 1

Try to add css in he same page under the div. Maybe there are cinflict b/w that's why it doesn't change anything.

Upvotes: 0

Related Questions