4

I am working with angular-google-map.I want to change size of the information window that is for mobile screen.So I am applying css in media queries.Its not applying 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;
    }
}
Karthi
  • 3,019
  • 9
  • 36
  • 54

1 Answers1

4

Move your css code to a global css file and not in a component's css file. e.g. styles.css file.

I recommend you to look at angular docs for style-scope, to better understand how styles are working in angular.

benshabatnoam
  • 7,161
  • 1
  • 31
  • 52