Fix iFrame height.

[erikbuunk]

Fix iFrame height.

I found scripts to update the height of the iframe and these work in principle, the other frameworks (adminLTE or Bootstrap) mess things up where the height is set and doesn't get smaller anymore. Needs a deep dive into the code.

[erikbuunk]

I have spent multiple hours to find a solution, but did find a good solution.

There are scripts that will set the iframe height according to the height of the client within the page. In princple these scripts work.

Complications:

• Pages are generated, so it takes some time before everything is set.
• Height is overruled by underlying scripts (admin lte and/or bootstrap).
• Once the height is large, it doesn't shrink any more

The should be multiple changes in the setup.

• It should take so long to create the page. Some items could be rendered by Jekyll when data is updated. For example use the TSV to loop over Business operations items in Jeykyll with a template instead of javascript during load. Use Jekyll to generate Metrics badges (Scorecards) #38.
• Strip out everything that is not needed from admin/bootstrap libraries. (i have started with these libraries to get started faster, but now they are making things complicated). Review the Bootstrap and Admin LTE CSS and overrides  #27
• use of static, generated images for the charts (you loose interaction, but page is more stable)

[erikbuunk]

Liz told me that Gary wants this to be solved. So it will be high priority now.

[erikbuunk]

Uncaught DOMException: Permission denied to access property "height" on cross-origin object

[erikbuunk]

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

<iframe id = "metrics-frame" frameborder="0"
        src="http://127.0.0.1:4000/index.html"
        style="width: 100%;"
        scrolling="no"
        onLoad="changeIFrameSize();">
</iframe>


<script>
    // setInterval(function(){
    //     changeIFrameSize()
    //
    // }, 1000);

    function changeIFrameSize() {
        console.log("resizing")

        var frame = document.getElementById('metrics-frame');

        if(frame) {
            frame.height = frame.contentWindow.outerHeight;

        }
    }

    window.onresize = changeIFrameSize;

    window.addEventListener('resize', changeIFrameSize);
</script>

[erikbuunk]

Once the height is large, is doesn't become small again:

current code:

<iframe
        id = "metrics-frame" frameborder="0"
        src="http://127.0.0.1:4000/index.html"
        style="width: 100%;"
        scrolling="no"
        gesture="media"
        onLoad="changeIFrameSize();"
>
</iframe>



<script>
    setTimeout(function(){
        changeIFrameSize()

    }, 2000);

    function changeIFrameSize() {

        var frame = document.getElementById('metrics-frame');

        if(frame) {
            // frame.height = 0 + "px";
            frame.height = (frame.contentWindow.document.body.scrollHeight) + "px";
            // frame.height = (frame.contentWindow.document.body.offsetHeight) + "px";

        }
    }

    window.onresize = changeIFrameSize;

    window.addEventListener('resize', changeIFrameSize);
</script>

[erikbuunk]

I have tried to strip all the bootstrap/adminLTE references. reading the scrollHeight still does not return the correct heights. The one thing that I can think of now is that it has to do with the charts. But removing/rewriting this part will be like rewriting the whole metrics page.

Evan's thinks it not worth it putting more effort in this. Best solution may be to keep it as a separate page.

[erikbuunk]

Solution is not ideal: a lot of manual tweaking of the different screen widths.. Still prefer it to be an external page.
The tabbed interface has an iframe each. The homepage has all the javascript code with the heigths for the different breakpoints.

https://github.com/IQSS/iqss-metrics-dashboard/blob/master/embedded%20code%20home%20tab.html

[erikbuunk]

[erikbuunk]

The solution seems to be unstable. Google Chrome on Windows does not adjust the height (on MacOS it does). Another thing I noticed was that (mainly DSS) does not always update correctly. I'll discuss with Liz if we go to Open Scholar.