如何更改 css 中 agm-info-window 的大小

Question

我正在使用 angular-google-map.I 想要更改信息的大小 window 用于移动设备 screen.So 我正在申请css in media queries.Its not apply to the info-window at all.Even if css placed outside the media query its not applying.Please Help

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" [disableDefaultUI]="false" [zoomControl]="true"
[scrollwheel]="false">


      <agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(infowindow, i)" [latitude]="m.location_details_lat"
    [longitude]="m.location_details_lon" [iconUrl]="m.icon">
        <agm-info-window #infowindow [maxWidth]="320">
          <div>
            <h2>NODE: {{ m.NODE_ID }}</h2>
          </div>
          <div class="agm-info-content">

            <div class="content-row">
              <div>CMTS NAME</div>: {{ m.CMTS_NAME }}
            </div>
            <div class="content-row">
              <div>Status</div>: {{ m.STATUS }}
            </div>
            <div class="content-row">
              <div>Homes On Node</div>: {{ m.TOTAL_ADDR_CNT }}
            </div>
            <div class="content-row">
              <div> Homes Affected</div>: {{ m.ADDR_COUNT_TOTAL_ADDR }}
            </div>
            <div class="content-row">
              <div>Created Date</div>: {{ m.CREATE_DTM }}
            </div>
            <div class="content-row" *ngIf="m.STATUS=='inactive'">
              <div>Cleared Date</div>: {{ m.CLEARED_DTM }}
            </div>
            <div class="content-row">
              <div>Duration</div>: {{ m.duration }}
            </div>
          </div>


        </agm-info-window>
      </agm-marker>

     </agm-map>

//css

.gm-style .gm-style-iw {

    width: 100%;
    max-width: 284px !important;
}

@media only screen and (max-width: 767px) {
    .gm-style .gm-style-iw {

        width: 100%;
        max-width: 284px !important;
    }
}

Answer 1

将您的 css 代码移动到全局 css 文件中，而不是组件的 css 文件中。例如styles.css 个文件。

我建议您查看 style-scope 的 angular 文档，以更好地了解样式在 angular 中的工作原理。

如何更改 css 中 agm-info-window 的大小

How to change the size of the agm-info-window in css

typescript

angular7

angular-google-maps