CODEWITHSUNDEEP
javascripthtmlcssangulargoogle-maps-api-3
chuckd
chuckd

Reputation: 14580

How can I center my google maps info window content?

I have this stackblitz here that opens a google maps info window. I've removed(hidden) the close button, but the window is still off on the right side padding and/or margins.

How can I center the bootstrap card that sites in the info window?

Upvotes: 1

Views: 519

Answers (1)

yurzui
yurzui

Reputation: 214125

That additional white space on the right side is added by the following style:

<div class="gm-style-iw-d" style="overflow: scroll; max-height: 508px;">
                                  ^^^^^^^^^^^^^^^^

which means that browser always display scrollbars whether or not any content is actually clipped. Scrollbar is not visible for user here since it is hardly customized with google maps.

You should change it to overflow: auto:

:host ::ng-deep .gm-style-iw-d {
  overflow: auto !important;
}

Another issue is located here:

<div class="gm-style-iw gm-style-iw-c" style="padding-right: 0px; padding-bottom: 0px;
                                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

As you can see paddings are removed for right side. You should keep them as they were before (12px):

:host ::ng-deep .gm-style-iw-c {
    padding-right: 12px !important;
    padding-bottom: 12px !important;
}

And the last piece of the solution is to remove hardcoded width from your cards:

<div class="card" style="width: 18rem;">
                         ^^^^^^^^^^^^^
                         remove this

so that cards will have width 100% as by default.

Forked Stackblitz

enter image description here

Upvotes: 1

Related Questions