Tomáš Čičman Tomáš Čičman - 9 months ago 37
TypeScript Question

Power BI - Cannot set height for div

I am trying to develop custom visual for Power BI.
I have div element with leaflet map. When I do not set a height, visual is emplty. I can set a height with

this.mapDiv.style.height="300px";


But this is fixed.
How can I set height dynamically by viewport?

This is my code

private mapDiv: HTMLElement;

constructor(options: VisualConstructorOptions) {

this.mapDiv = document.createElement("div");
this.mapDiv.id = "mapid";
options.element.appendChild(this.mapDiv);

var map = L.map('mapid');
map.setView([48.14, 17.12], 13);

L.tileLayer('https:....', {
minZoom: 4,
maxZoom: 18,
}).addTo(map);

}

public update(options: VisualUpdateOptions) {
// this.mapDiv.style.height = "300px"; WORKS
this.mapDiv.style.height = options.viewport.height.toString(); // DOESNT WORKS !!!
}


Can you help pls?

Answer Source

You need to append "px" back to options.viewport.height as it's just a number.

i.e. You can try

this.mapDiv.style.height = options.viewport.height + "px";