Expander strange behavior when inside a Window

[MangelMaxime]

I took the same code as from Photonui expander's doc and put it inside a window.

The behavior is strange because the expander are not stacked together and split the space at 33% each.

Here is my code:

JavaScript:

var photonui = require('photonui');

var win = new photonui.Window({
    visible: true,
    fullscreen: true,
    closeButtonVisible: false,
    child: new photonui.BoxLayout({
        orientation: "horizontal",
        children: [
            new photonui.BoxLayout({
                horizontalPadding: 10,
                verticalPadding: 10,
                spacing: 10,

                children: [
                    new photonui.Expander({
                        title: "Expander 1",
                        child: new photonui.Label({
                            text: "Never gonna..."
                        })
                    }),
                    new photonui.Expander({
                        title: "Expander 2",
                        folded: true,
                        child: new photonui.Label({
                            text: "... give you..."
                        })

                    }),
                    new photonui.Expander({
                        title: "Expander 3",
                        folded: true,
                        child: new photonui.Label({
                            text: "... up!"
                        })
                    })
                ]
            })
        ]
    })
});

My CSS: (should not interfere)

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}

Possible solutions:

Here are the css rules that I find controlling this behavior:

• Disable: height: 100%; from top BoxLayout element.
• Disable: flex-grow: 1; from .photonui-boxlayout > .photonui-boxlayout-item

I just give this possible solutions like that but I didn't think about their usage.

[Breush]

Can you try adding stretchToParentHeight: false to the BoxLayout's options that is holding the expanders?

I'm pretty sure the behavior you are experimenting is related to BoxLayout and not Expanders.

[MangelMaxime]

Adding stretchToParentHeight: false does nothing.

And you are probably reason about the behavior being related to BoxLayout because I tried to use BoxLayout to structure my app and I gave the same behavior whenever the BoxLayout is going taller.

[MangelMaxime]

Just to complete, if we replace the Expander by Menu + SubMenuItem the behavior is correct.

[Breush]

Well, I just noticed that you have two BoxLayouts. Set stretchToParentHeight: false to both (or just the outermost one), and it should fix the issue.

You also might not need the horizontal box, or should use a GridLayout if you have a complex UI to design.

[MangelMaxime]

Ok so I needed to put stretchToParentHeight: false on the outermost BoxLayout.

And yes, should probably try to use the GridLayout but I am not sure if this would make cleaner or not the GUI. Nevermind, thanks for your help @Breush

I let you close this issue if you think that the current behavior is OK.