Question

我正在使用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;
    }
}

Answer 1

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

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

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

1 个答案: