Power BI - Cannot set height

[tomascvm]

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-msft · Accepted solution]

@tomascvm,

You need to add the length unit.

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

[tomascvm]

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 !!!
    }