# Nested FlexBox items?

**URL:** <https://forum.juce.com/t/nested-flexbox-items/22181>\
**Category:** General JUCE discussion\
**Created:** [May 1, 2017, 10:35pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181 "2017-05-01T22:35:17Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![loopfine](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/loopfine/32/141_2.png) [@loopfine](https://forum.juce.com/u/loopfine)\
**Post date:** [May 3, 2017, 1:02pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/21 "2017-05-03T13:02:57Z")

</div>

My advice: always use ‘++i’ rather than ‘i++’ if it’s possible.

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 1:03pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/22 "2017-05-03T13:03:53Z")

</div>

> [@matkatmusic](#):
>
> FlexView::FlexView() {  
> allUsersList.addListener(this);  
> for( int i = 1; i \< 10; ++i) {  
> allUsersList.addItem(String(i), i);  
> }  
> allUsersList.setSelectedItemIndex(0);  
> }

**`int i = 1`** is right here ?

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 1:04pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/23 "2017-05-03T13:04:42Z")

</div>

i do not deserve to keep my name

---

<div class="post-metadata">

**Author:** ![loopfine](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/loopfine/32/141_2.png) [@loopfine](https://forum.juce.com/u/loopfine)\
**Post date:** [May 3, 2017, 1:05pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/24 "2017-05-03T13:05:16Z")

</div>

and always:

```auto
for (int i = 5; --i >= 0; )

```

rather than

```auto
for (int i = 0; i < 5; ++i)

```

if it’s possible…

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 1:05pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/25 "2017-05-03T13:05:40Z")

</div>

sure, sure

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 1:06pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/26 "2017-05-03T13:06:03Z")

</div>

[https://juce.com/doc/classComboBox#a37491da45f1cbb74e47f145e5664d8bf](https://juce.com/doc/classComboBox#a37491da45f1cbb74e47f145e5664d8bf)

newItemId an associated ID number that can be set or retrieved - see getSelectedId() and setSelectedId(). **Note that this value can not be 0!**

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 1:08pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/27 "2017-05-03T13:08:04Z")

</div>

i see 😕

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 1:08pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/28 "2017-05-03T13:08:47Z")

</div>

This is where I’m at, to clarify the resized() and comboBoxChanged() methods now:

in the header, private section:

```auto
    ScopedPointer<PlaceHolder> footer;
    ScopedPointer<PlaceHolder> sequence;

```

in the constructor:

```auto
    addAndMakeVisible( footer = new PlaceHolder("footer", false) );
    addAndMakeVisible( sequence = new PlaceHolder("sequence", false ) );

```

and the revised resized() and comboBoxChanged()

```auto
void MainContentComponent::resized()
{
    FlexBox headerBox;
    {
        headerBox.items.add(FlexItem(allUsersList).withFlex(1.0).withMargin({2.0}) );
        addAndMakeVisible(allUsersList);
    }
    FlexBox contentBox;
    {
        FlexBox segmentBox;
        segmentBox.flexWrap = FlexBox::Wrap::wrap;
        segmentBox.flexDirection = FlexBox::Direction::row;
        {
            for( int i = 0; i < elements.size(); ++i ) {
                auto &newElement = *elements[i];
                DBG( "name: " + newElement.getName() );

                segmentBox.items.add( FlexItem( newElement ).withFlex(1.0).withMargin({2.0}));
            }
        }
        contentBox.items.add( FlexItem(segmentBox).withFlex(1.0).withMargin({2.0}) );
    }
    FlexBox selectedSequenceBox;
    {
        selectedSequenceBox.items.add( FlexItem( *sequence ).withFlex(1.0).withMargin({2.0}) );
    }
    FlexBox footerBox;
    {
        footerBox.items.add( FlexItem( *footer ).withFlex(1.0).withMargin({2.0}) );
    }
    FlexBox interface;

    interface.flexDirection = FlexBox::Direction::column;
    interface.items.add( FlexItem(headerBox).withFlex(0.5) );
    interface.items.add( FlexItem(contentBox).withFlex(1) );
    interface.items.add( FlexItem(selectedSequenceBox).withFlex(0.5) );
    interface.items.add( FlexItem(footerBox).withFlex(0.5) );

    interface.performLayout(getLocalBounds());
}

```

```auto
void MainContentComponent::comboBoxChanged(juce::ComboBox *comboBoxThatHasChanged) {
    if( comboBoxThatHasChanged == &allUsersList ) {
        DBG( "comboBoxChanged selectedID:" + String(allUsersList.getSelectedItemIndex()) );
        loadedSession = allUsersList.getSelectedItemIndex() + 1;
        elements.clear();
        for( int i = 0; i < loadedSession; ++i ) {
            DBG( "i: " + String(i) );
            elements.add( new PlaceHolder("segmentBox" + String(i+1), false) );
            auto &newElement = *elements[i];
            addAndMakeVisible( newElement );
        }
        resized();
    }
}

```

 ![](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/4/4f1ddb95b6391fb965e300fc12d548b4a602bfc0.png)

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 1:27pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/29 "2017-05-03T13:27:36Z")

</div>

@jules we need your help lol. none of us, including @daniel or a few other folks in the #juce IRC channel on freenode can solve it.

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 1:45pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/30 "2017-05-03T13:45:32Z")

</div>

ok, it seems that FlexBox::items::add does not like when you use blocks to control nesting. the following works perfectly when all of those scoping `{}` are removed:

```auto
void MainContentComponent::resized()
{
    FlexBox headerBox;
        headerBox.items.add(FlexItem(allUsersList).withFlex(1.0).withMargin({2.0}) );
        addAndMakeVisible(allUsersList);
    FlexBox contentBox;
        FlexBox segmentBox;
        segmentBox.flexWrap = FlexBox::Wrap::wrap;
        segmentBox.flexDirection = FlexBox::Direction::row;
            for( int i = 0; i < elements.size(); ++i ) {
                auto &newElement = *elements[i];
                DBG( "name: " + newElement.getName() );

                segmentBox.items.add( FlexItem( newElement ).withFlex(1.0).withMargin({2.0}));
            }
        contentBox.items.add( FlexItem(segmentBox).withFlex(1.0).withMargin({2.0}) );
    FlexBox selectedSequenceBox;
        selectedSequenceBox.items.add( FlexItem( *sequence ).withFlex(1.0).withMargin({2.0}) );
    FlexBox footerBox;
        footerBox.items.add( FlexItem( *footer ).withFlex(1.0).withMargin({2.0}) );
    FlexBox interface;

    interface.flexDirection = FlexBox::Direction::column;
    interface.items.add( FlexItem(headerBox).withFlex(0.5) );
    interface.items.add( FlexItem(contentBox).withFlex(1) );
    interface.items.add( FlexItem(selectedSequenceBox).withFlex(0.5) );
    interface.items.add( FlexItem(footerBox).withFlex(0.5) );

    interface.performLayout(getLocalBounds());
}

```

---

<div class="post-metadata">

**Author:** ![uuich](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/uuich/32/19970_2.png) [@uuich](https://forum.juce.com/u/uuich)\
**Post date:** [May 3, 2017, 1:50pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/31 "2017-05-03T13:50:47Z")

</div>

👏

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [May 3, 2017, 1:57pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/32 "2017-05-03T13:57:11Z")

</div>

Requesting that some addition to the FlexBox documentation be added that clarifies if you’re going to masterFlexBox.items.add( FlexItem( FlexBox& flexBoxToControl ) ), the flexBoxToControl needs to not go out of scope until masterFlexBox is out of scope.

`FlexItem::FlexItem	(	FlexBox & flexBoxToControl	)`

supposedly it is implied by the reference being used, but some of us (me) are dumb lol

---

<div class="post-metadata">

**Author:** ![daniel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/daniel/32/790_2.png) [@daniel](https://forum.juce.com/u/daniel)\
**Post date:** [May 3, 2017, 2:06pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/33 "2017-05-03T14:06:08Z")

</div>

> [@matkatmusic](#):
>
> the flexBoxToControl needs to not go out of scope until masterFlexBox is out of scope.

i.e. not before performLayout was called.

When ading to Array items using [add ()](https://www.juce.com/doc/classArray#ae81ab0d9abbd36bf4aab593c255eef38) one expects it’s lifetime to be dependant of the containing array, but since C++11 this seems different…

I always wondered, how `add (ElementType && newElement)` is different from `add (ElementType & newElement)` and how I can enforce the use of either…

> [@matkatmusic](#):
>
> supposedly it is implied by the reference being used

The reference in the constructor to the Component has nothing to do with the lifetime in the FlexBox items container IMHO.

---

<div class="post-metadata">

**Author:** ![jonathonracz](https://avatars.discourse-cdn.com/v4/letter/j/da6949/32.png) [@jonathonracz](https://forum.juce.com/u/jonathonracz)\
**Post date:** [November 5, 2017, 4:57am UTC](https://forum.juce.com/t/nested-flexbox-items/22181/34 "2017-11-05T04:57:41Z")

</div>

Wanted to chime in on this thread. I have a bunch of `FlexItems` I was able to consolidate into a `for` loop, and got burned big time when the `FlexItem` component pointers were mysteriously going out of scope.

Extra documentation, an explanation why this happens, or a workaround would be greatly appreciated!

Now off to copy/paste dozens of lines of code in my `resized()` method to manually unroll the loop…

---

<div class="post-metadata">

**Author:** ![fr810](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/fr810/32/841_2.png) [@fr810](https://forum.juce.com/u/fr810)\
**Post date:** [November 16, 2017, 12:01pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/35 "2017-11-16T12:01:28Z")

</div>

I can’t see how to fix this problem without making everything reference counted, as multiple `FlexItems` could technically reference the same `FlexBox`. To be honest, the reference counting itself would not add so much overhead, however, the FlexItems would need to live on the heap rather than the stack which would throw memory allocations/de-allocations into the mix which may be a bit too much for some complex layouts.

For now, I’ve updated the documentation (will appear on develop shortly).

---

<div class="post-metadata">

**Author:** ![otristan](https://avatars.discourse-cdn.com/v4/letter/o/f0a364/32.png) [@otristan](https://forum.juce.com/u/otristan)\
**Post date:** [November 22, 2017, 2:28pm UTC](https://forum.juce.com/t/nested-flexbox-items/22181/36 "2017-11-22T14:28:41Z")

</div>

I was almost bitten by this. I would have though that the whole purpose of Flexbox is to have nested ones.  
My rationale was to have FlexBox and FlexItem only defined in resized to avoid polluting the class with member data only used for the layout.

Like I have those labels and associated knob and would like to be able to iterate over those and place label on top of knobs.

People don’t use it like that ?

Maybe I should have a look at Grid instead

[Previous page](https://forum.juce.com/t/nested-flexbox-items/22181.md?page=1)