Forum Discussion
tomascvm
9 years agoNew Member
Power BI - Cannot set height
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 !!!
}You need to add the length unit.
this.mapDiv.style.height = options.viewport.height.toString() + "px";
2 Replies
- tomascvmNew Member
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 !!! } - v-chuncz-msftCommunity Support
You need to add the length unit.
this.mapDiv.style.height = options.viewport.height.toString() + "px";