Golden-layout: Layout with container resize bugs ( reopen)

[maxiplay]

Hello,

Fist of all congratulation for this great work.

I would reopen the bug of joshribakoff about resize with container.

I think you don't understand his demand because in your code response you don't apply the concept of golden-layout in a container. You just use golden-layout in body and add a css rule to manage scroll. But if you reopen the code link
you can see that compare to your codepen response the "component 2" is not adapted when resize. It's not that it is too small, it that the golden-layout don't have a resize event.

On the other hand, if you try to move a tab with mouse, the component 2 is resized correctly.

With your code example, no problem. Because you don't use the with-container initialization.

var myLayout = new window.GoldenLayout( config, $('#layoutContainer') );

but

var myLayout = new GoldenLayout( config );

I commented the scroll css property in you example et resized the window.
Ok the component is too small for the photo, but the component has been resized correctly.

[WolframHempel]

hi @maxiplay ,

I see what you are saying. When you use GoldenLayout in the body tag directly, it listens for window resize events and updates accordingly. If you use it in any other dom element, you are responsible for telling GoldenLayout when it needs to resize (as there's no way of knowing via the DOM API). You can do so by calling myLayout.updateSize()

[maxiplay]

Ok thank you :)

[stephenjelfs]

FYI - I'm currently using the following library to listen for element resizes and trigger calls to updateSize();

https://www.npmjs.com/package/javascript-detect-element-resize

So far, it seems to work well with the GoldenLayout library.

[gregblass]

Just use:

$(window).resize(function() {
  myLayout.updateSize()
})