I have an ionic capacitor app where I added a TomTom map using the TomTom api @tomtom-international/web-sdk-maps. Everything works fine (styles, controls, custom layers, …). My only problem is related to the map size.

My intention is that the map covers 100% of the device’s width and 60% of its height, with a control to go full-screen. So, my code is:

.TS
import tt from '@tomtom-international/web-sdk-maps';
(...)
this.map = tt.map({
  key: {{MY_API_KEY}}
  container: "map",
  center: [2, 41.5],
  zoom: 6,
});
// add controls 
this.map.on('load',() =>{
  (...)
  this.map.addControl(new tt.FullscreenControl());  
});  

.HTML
<div #map id="map"></div>

.SCSS    
#map {
  height: 60%;
  width: 100%;
}

The container shows up as expected, but its lower part is blank (with the map scale and the TomTom copyright notice). When I click on the fullscreen control, the container goes to fullscreen, but not the map (its lower part is still blank).

One point is that I get the container filled after rotating the device to landscape mode and back to portrait mode. It happens both in normal and fullscreen modes.

I tried to provide width and height values in px instead of %.
Also tried to modify these parameters dynamically.
I tried a physical device and different emulaotors.
Everything works fine, except that the map does not covers the full container’s surface, except when I rotate the device to landscape position and back to portrait.