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

【问题标题】：How to change the size of the agm-info-window in css如何在 css 中更改 agm-info-window 的大小
【发布时间】：2019-07-16 17:16:56
【问题描述】：

我正在使用 angular-google-map。我想更改用于移动屏幕的信息窗口的大小。所以我在媒体查询中应用 css。它根本不适用于信息窗口。即使放置在媒体查询之外的 CSS 不适用。请帮助

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

【问题讨论】：

保护您添加 css 的位置。它在某个组件的 css 文件中吗？
是的，它在组件的 css 文件中

标签： typescript angular7 angular-google-maps

【解决方案1】：

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

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

【讨论】：