Changing flexBasis in resize()

General JUCE discussion
1

I’m building a layout with FlexBox and want to have a 2 x 2 grid of visible rows and columns, which stretch to fit the available space. I know I could use the Grid class, but I actually want the items, which are unknown in number, to spill outside the visible area if there are more than 4 (across the horizontal axis), at which point they will be in a viewport so the user can scroll across to see the hidden items.

If I know the main window size, I can set the flex-basis property to just under half the height, and I get the desired layout. However, this will be a full screen app which could run on different resolution monitors, so ideally I want to be able to set the flex-basis property in the resize() method. However, setting it there seems to have no effect. I can see that its possible to set this at runtime from the FlexBox demo.

My resized method:

    void resized() override
    {
        for (auto flexItem : flexBox.items) 
        {
            flexItem.flexBasis = getHeight() / 2 - 20;
            DBG ("flexBasis set to " << flexItem.flexBasis);
        }
        flexBox.performLayout (getLocalBounds().toFloat());
    }

I can see the resized method getting called, but my layout doesn’t change. Is there something I’m missing here?

2

You can definitely change the flex-basis in the resized() method but its effect depends on your minWidth and maxWidth values of those flexItems (in this case if the main axis is in the row direction).

It will have no effect if the flex-basis value lands outside of this min-max range.

3

OK, I’m not sure why I need to define the min/max values, I tried that and it does not seem to have an effect. Here is my FlexBox initialisation code:

    flexBox.flexDirection = FlexBox::Direction::column;
    flexBox.alignContent = FlexBox::AlignContent::stretch;
    flexBox.justifyContent = FlexBox::JustifyContent::spaceBetween;
    flexBox.flexWrap = FlexBox::Wrap::wrap;

    for (auto item : items)
    {
        flexBox.items.add (FlexItem(*item)
                                   .withMinHeight(100)
                                   .withMaxHeight(400)
                                   .withFlex(0, 1, 250) // <-- flex-basis only works here, not in the resized method
                                   .withMargin({5, 50, 5, 50}));
    }
4

Where is your FlexBox initialisation code currently? It should be in resized() anyways.

1 Like
5

Ah thats probably it then - its in the component constructor, as this is how I usually do it… I only call performLayout in resize().

6

I think the docs could be updated to mention that for flexibility, FlexBox should be initialised within the resized() method.

7

Will add that to the docs, thanks.