Layout occupies full screen and cannot see banner or access menu

[GOVYANSONG]

Describe the bug

This may very well be issue with my understanding of flex layout during my first experiment attempt. In our system, at the top of page there is a banner and system menu. When flex layout is shown, it takes over entire page and hide the banner and menu, which is undesirable. This may be caused by flexlayout_layout style. Is there a way to change this behavior?

thanks

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Check out the screenshot with banner and system menu bar; After clicked on a menu item, check the flex layout occupying entire page

Expected behavior

I would expect flex layout is display underneath the existing banner and system menu bar.

Operating System

Windows

Browser Type?

Chrome

Browser Version

V98.0

Screenshots or Videos

Additional context

No response

[GOVYANSONG]

FYI in Chrome DevTools, on the root div element of layout with class name "FlexLayout_layout", i was able to modify position to relative to make layout shown underneath the banner and system menu. Height attribute can overriden same way to allow reasonable initial height.

[GOVYANSONG]

FYI https://github.com/caplin/FlexLayout/pull/138

[nealus]

Yes you can change the flexlayout__layout style, or host the layout in a container element

[averybross]

@nealus I am getting the same error..

I have a wrapper with a footer, head, and main inside...

the wrapper is flex, the main is pos: rel...

What could I be missing?

The layout system is cut off on the bottom... it's like it's not recalculating the positions of everything.. @nealus any clue why?

[averybross]

here you were able to add UI above the FlexLayout...

I am not able to do the same and I am not sure why...

[GOVYANSONG]

Here is code snippet to set up the flexlayout. hopefully it is useful:

{model &&

}