Open erikbuunk opened 4 years ago
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:
The should be multiple changes in the setup.
Liz told me that Gary wants this to be solved. So it will be high priority now.
Uncaught DOMException: Permission denied to access property "height" on cross-origin object
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>
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>
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.
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
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.
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.