Golden-layout: Golden Layout not resizing with browser screen when inside DIV. Prevent hard-coded height and width in my container?

[JDGHHou]

When I use:
myLayout = new window.GoldenLayout(config, $('#mydiv'));

to attach my configured layout to a container DIV, the content generated by Golden Layout doesn't resize automatically when I expand/contract my browser. It does so when I just do:
myLayout = new window.GoldenLayout(config);

and write the layout to my body tag.

When I inspect the code that Golden Layout inserts into my DIV, I see that all of the sub-elements have hardcoded style tags attached that set the width and height attributes to hard-coded values.

When I re-size the screen, my Golden Layout windows stay the same size.

Does anyone know how to make it so the GL will auto-size to the size of my browser window?

[malled]

You have to bind your own resize handler on browser resize event and call updateSize(...) method.
Use plain JS
window.addEventListener('resize', function(event){ // do stuff here });
(source https://stackoverflow.com/questions/641857/javascript-window-resize-event)
or jquery https://api.jquery.com/resize/

[JDGHHou]

Thanks again for your help, Malled!

Here is the exact code that works for me. I hope it helps someone else:

$(window).resize(function () {
myLayout.updateSize($(window).width(), $(window).height());
});

[gaenglish]

Updating layout size on state changed worked for me. This also resolved resizing issues when clicking on tabs or adjusting boundaries
let width = $(window).width(); let height = $(window).height(); myLayout.on( 'stateChanged', () => myLayout.updateSize(width, height));