Possibility to have a non-full screen view

[andreaghezzi]

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:

[sscarduzio]

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?

[nealus]

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

[sscarduzio]

Yes but how? All I get is absolute positions in the generated tabs, and my sidebar and header are covering the tab controls.

[nealus]

do you have flexlayout inside a container div (which must have position: absolute or relative)?
Internally flexlayout positions tabs etc using absolute positions

[sscarduzio]

Yes now I wrapped it inside a relative position div, and I get this (like, no CSS is applied for some reason?)

import React from 'react'
import * as FlexLayout from 'flexlayout-react'

import GraphCard from '../../dashboard/GraphCard'

const json = {
  global: { tabEnableClose: false },
  borders: [
    {
      type: 'border',
      location: 'bottom',
      size: 90,
      children: [
        {
          type: 'tab',
          name: 'four',
          component: 'text',
        },
      ],
    },
    {
      type: 'border',
      location: 'left',
      size: 90,
      children: [],
    },
  ],
  layout: {
    type: 'row',
    weight: 100,
    children: [
      {
        type: 'tabset',
        weight: 50,
        selected: 0,
        children: [
          {
            type: 'tab',
            name: 'One',
            component: 'text',
          },
        ],
      },
      {
        type: 'tabset',
        weight: 50,
        selected: 0,
        children: [
          {
            type: 'tab',
            name: 'Two',
            component: (
              <div style={{ height: '100%' }}>
                <GraphCard></GraphCard>
              </div>
            ),
          },
          {
            type: 'tab',
            name: 'Three',
            component: 'text',
          },
        ],
      },
    ],
  },
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { model: FlexLayout.Model.fromJson(json) }
  }

  factory(node) {
    const component = node.getComponent()
    if (component === 'text') {
      return (
        <div style={{ height: '100%' }} className="panel">
          Panel {node.getName()}
        </div>
      )
    }
    return node.getComponent()
  }

  render() {
    return <FlexLayout.Layout model={this.state.model} factory={this.factory.bind(this)} />
  }
}
export default App

[sscarduzio]

I tried adding import 'flexlayout-react/style/light.css' but it's again having the issue with absolute positioning. Maybe we need a relative positioning friendly CSS file?

[nealus]

you need a surrounding container div like this:

[nealus]

<div style={{position:"relative"}}>
  <FlexLayout.Layout model={this.state.model} factory={this.factory.bind(this)} />
</div>

[sscarduzio]

I already had that relative position wrapper in the caller component. Anyway, I reproduced the issue in this sandbox.

https://codesandbox.io/s/zealous-water-yqmbf9?file=/src/TabbedView.js

We have a header, a footer, and a middle div where I'd like the the layout to live.

[nealus]

the middle div needs to have a size e.g:

<div style={{ position: "relative", border:"1px solid blue", height:100 }}>
so if the flexlayout was not there the container would fill the area you expect

[sscarduzio]

now we have this:

Still garbled controls, some CSS is missing!

[nealus]

add the import 'flexlayout-react/style/light.css';

[sscarduzio]

Now it's disappeared, I think it's because that CSS assumes all the positioning is absolute.

[sscarduzio]

are you able to run this sandbox at all?

[nealus]

[sscarduzio]

Thank you! It works now 👍
So the wrapper had to have an explicit height!

[nealus]

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/

[yukosgiti]

Changing the .flexlayout__layout class in the css file to

.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.