Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to automatically resize height of visjs Network component when window resized?

Tags:

jquery

vis.js

It is just an answer, as I could not find the answer myself, so wrote it for community. Some commented out code to play with too.

like image 418
ALeX inSide Avatar asked Sep 26 '18 14:09

ALeX inSide


1 Answers

<div id="map"> </div>

<script type="text/javascript">
    function getMapHeight() {
        return (window.innerHeight - 90);
    }

    $(function () {
        let options = {
            autoResize: true,
            // width: '100%',
            height: getMapHeight() + "px",
        };

        let network = new vis.Network($("#map"), data, options);

        $(window).on('resize', function(){
            network.setOptions({
                // width: (window.innerWidth - 100) + "px",
                height: getMapHeight() + "px",
            });
        });
    });
</script>
like image 159
ALeX inSide Avatar answered Nov 13 '22 23:11

ALeX inSide