version 4.22 angular 13 Map container height

[marjbilou]

Hi,

i am working on a project based on angular 13, i added the library arcgis/core (4.22.2).

as stated in the tutorials, i added the css in my component css : 

@import url('https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css');

i also added the height:100%;width:100% in my component css.

but i can't see the map in my page (the height is computed to 0)

i have to set mannually a height in px to see it.

what am i doing rwrong ?

[AndyGup]

Hi @marjbilou can you provide a simple GitHub repo or StackBlitz that reproduces the issue? And, are you are able to upgrade to the latest ArcGIS JS Maps SDK release, which is currently 4.29? Version 4.22 goes into mature support in just a few days, at the end of this month: https://support.esri.com/en-us/products/arcgis-maps-sdk-for-javascript/life-cycle.

Here's our Angular sample that might give you some hints on what's not working: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli. The sample is using Angular 17 (latest). Angular 13 is no longer supported by Google: https://angular.io/guide/releases#actively-supported-versions.

[boa_panter]

I had the same problem. 
Here is the CSS code which fixed the problem for me. 
You need to set the container to position absolute.

@import "@arcgis/core/assets/esri/themes/light/main";

:host {
  width: 100%;
  height: 100%;
}

.map-wrapper {
  position: relative;
  height: 100%;
  width: 100%;

  .map-content {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

<div class="map-wrapper">
  <arcgis-map class="map-content" />
</div>