Possibility to have a non-full screen view #336
Replies: 10 comments 8 replies
-
This is very important for us as well: we already have a React project with our own sidebar, and would like to render the FlexLayout tabs inside a div, as a regular React component would do. Please confirm at least if this is even possible? Or are there any workarounds? |
Beta Was this translation helpful? Give feedback.
-
yes flexlayout can be put in any div (it will fill the div, which should have position absolute or relative), it handles the container resizing |
Beta Was this translation helpful? Give feedback.
-
Yes but how? All I get is absolute positions in the generated tabs, and my sidebar and header are covering the tab controls. |
Beta Was this translation helpful? Give feedback.
-
do you have flexlayout inside a container div (which must have position: absolute or relative)? |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
the middle div needs to have a size e.g:
|
Beta Was this translation helpful? Give feedback.
-
add the import 'flexlayout-react/style/light.css'; |
Beta Was this translation helpful? Give feedback.
-
the containing div must have a size, either explicitly or due to its layout (so it would fill that area even without containing the flexlayout). A flexbox layout (display:flex) might be a good option for your header, center, footer outer layout seehttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
Beta Was this translation helpful? Give feedback.
-
Changing the .flexlayout__layout {
left: 0;
top: 0;
right: 0;
bottom: 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
} Seem to work for me. Dragging dropping tabs etc. seems fine. I am just playing with the library though, there might be cases I may have missed. |
Beta Was this translation helpful? Give feedback.
-
Hi everyone!
This is the most powerful layout manager for tabs I've found.
I need to have this FlexLayout in the middle of my page, while above and below it will be other things, such as images and text. Is it possible then to resize the entire Layout component?
An example is here:
Beta Was this translation helpful? Give feedback.
All reactions