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 ?

 

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>