Network with 100% height set does not render correctly

ghost commented 8 years ago

I'm trying to use Network where the height/width needs to be dynamic for a responsive layout.

If I set the Network to a fixed height/width all works as expected, except resizing (obviously) won't change the canvas to fit.

But if I set height/width to 100%, the canvas correctly sizes to the width (including autoResize set to true) but I always end up with a 150px height canvas, whereas the height of the container div could comfortably be > 800px.

I've created a demo plunker to show the problem.

vletoux commented 6 years ago

After 1,5 days of investigation, I found this thread. +1 for the 150px size.

I manage to do a single test for me using this gist: https://gist.github.com/anonymous/dc7d6446628650b9153f5f76d8ba017b

If I remove the doctype html (html5) it fit nicely With HTML5: Without HTML5:

There is no example for a fullscreen mode. All examples I looked at are boxed. => please add a fullscreen example in the documentation (example of question: should I add a workaround to compute the size in javascript ?)

Also: => what was the last working version of vis.js for 100% height ?

yaitskov commented 6 years ago

Ops. Html5 makes it working, but it affects view of many other page elements, so I have to validate and fix all pages. I agreed up on a workaround where parent div using fixed position, because anyway graph view should be as big as possible and it would occupy the entire screen. Sparse buttons would be located inside the view with transparent background.

mcarf commented 6 years ago

@wimrijnders Hi, what is the current state of this issue? I can give a hand if the branch or the PR is published, thanks

davidhbigelow commented 6 years ago

I have been struggling with sizing network canvas based on the height of the available space... and when a user resizes the browser window.

After a bit of testing and playing around -- I figured this out, seems to work. If you have alternative approaches, please post a suggestion or alternative example code.

I hope this helps others as a starting point for their own projects. Note: I am using jQuery to help streamline the resize functions.

IMPORTANT - NON-HMTL5 DOCTYPE

     <!DOCTYPE>

THE HEAD SECTION

  <head>

    <!-- JQUERY -->
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <style>

        html, body
        {
            height: 100%;
        }

        #header
        {
            width: 100%;
            background: orange;
            vertical-align: middle;
            text-align: center;
            line-height: 100px;
        }

    </style>

</head>

SAMPLE BODY CONTENT


    <div id="header"> Sample header region </div>
    <div id="container">
        <div id="mynetwork" style="border: 1px solid red;">
        </div>
    </div>

THE SCRIPT (bottom of the HTML BODY)

<script>

    function resizeCanvas () {
        $('#mynetwork').height($('body').height()-$('#header').height()-20)
    }

    $(document).ready(function () {
        $(window).resize(function(){
            resizeCanvas();
        });
    });

    resizeCanvas();

</script>

EXAMPLE - PAGE LOAD firstload

EXAMPLE - AFTER RESIZE afterresize

carlpaten commented 5 years ago

I'm also affected ;_;

davidhbigelow commented 5 years ago

@lilred -- did my example NOT help you? It seems to work fine for me across all browsers.

carlpaten commented 5 years ago

I'm using vis to make Grafana panel plug-ins, so I don't have control over the doctype.

davidhbigelow commented 5 years ago

I'm using vis to make Grafana panel plug-ins, so I don't have control over the doctype.

Oh - yea -- that was the only work around I found.... :(

dherault commented 5 years ago

Another workaround:

network.once('afterDrawing', () => {
  container.style.height = '100vh'
})

almende / vis

Network with 100% height set does not render correctly #1832