I need to have a GeoGebra Applet be responsive to window resizing. I have a following html and css
let params = {
"appName": "",
"showToolBar": false,
"showAlgebraInput": true,
"showMenuBar": false,
"id":"graphing",
"scaleContainerClass":"graphContainer",
"enableCAS":true
};
let applet = new GGBApplet(params, true);
applet.setHTML5Codebase('assets/geogebra/HTML5/5.0/web3d/');
window.addEventListener("load", function() {
applet.inject('ggb-element');
});
//Trying to use recalculateEnvironments
function windowResized() {
graphing.recalculateEnvironments()
}
window.addEventListener("resize", windowResized);html {
font-size: $font-size;
font-family: $font-family;
background: $background-color;
color: $font-color;
}
html, body{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
body{
background-color: #FAF9F6;
}
//Responsive font size
@media (min-width:1px){
html{
font-size: 0.4rem;
}
}
@media (min-width:300px){
html{
font-size: 0.5rem;
}
}
@media (min-width:689px){
html{
font-size: 0.8rem;
}
}
.root {
display: flex;
flex-flow: column;
height: 100%;
}
.row {
flex: 1 1 auto;
}
.footer {
display: flex;
align-items:center;
justify-content:center;
flex: 0 1 5%;
}
.questionBox{
// max-height: 35%;
// overflow-y: scroll;
position: relative;
z-index: 100; //Some number higer than the highest graph z value
flex: 0 1 auto;
width: 100%;
padding: 1% 0 1% 0;
background-color: #ffff;
box-shadow: rgba(70,161,255,0.5) 0 15px 30px -5px;
display: flex;
align-items:center;
justify-content:center;
font-size: 2rem;
text-align: center;
p{
padding: 0;
padding-left: 10px;
padding-right: 10px;
margin:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
</head>
<body>
<div class="root">
<div class="questionBox">
<p id="questionTXT">
</p>
</div>
<div id="row" class="row">
<div id="graph" style="width:100%;height:100%" class="graphContainer">
<div style="width:100%;height:100%" id="ggb-element"></div>
</div>
</div>
<div class="footer">
<button class="button-1" role="button">Submit</button>
</div>
</div>
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
</body>
</html>It looks correct but if you resize the window it stays its original size. If you reload the page it then looks correct at it's new size.
I've been looking through https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API and found some functions I thought might work like recalculateEnvironments() but that seemed to do nothing.
Update
Using graphing.setSize(document.getElementById('graph').clientWidth, document.getElementById('graph').clientHeight); Kind of works but ends up breaking after a while.