scaleContainerClass not working?

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<title>Geogebra Test</title>

</head>

<body>

<script src="Geogebra Lib/GeoGebra/deployggb.js"></script>

<script>

var params = {"appName": "classic", "width": 800, "height": 600,

"showToolBar": false, "showAlgebraInput": false ,"showMenuBar": false,

"allowStyleBar": false, "perspective": "G",

"scaleContainerClass": "right_panel"
};

var applet = new GGBApplet(params, true);

window.addEventListener("load", function() {

applet.setHTML5Codebase('Geogebra Lib/GeoGebra/HTML5/5.0/web3d/');

applet.inject('ggb-element');

});

</script>

<div id="ggb-element"></div>

<div class="right_panel"></div>

<script src="main.js"></script>

</body>

</html>

CSS:

.right_panel {

position: absolute;

width: 96px;

padding-left: 4px;

height: 100%;

right: 0;

background-color: #f0f0ff;

}

.right_panel::after {

content: '';

background-color: #ccc;

position: absolute;

left: 0;

width: 4px;

height: 100%;

cursor: ew-resize;

}

JS:

const BORDER_SIZE = 4;

const panel = document.querySelector(".right_panel");

let m_pos;

function resize(e){

const dx = m_pos - e.x;

m_pos = e.x;

panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";

}

panel.addEventListener("mousedown", function(e){

if (e.offsetX < BORDER_SIZE) {

m_pos = e.x;

document.addEventListener("mousemove", resize, false);

}

}, false);

document.addEventListener("mouseup", function(){

document.removeEventListener("mousemove", resize, false);

}, false);

/r/geogebra Thread