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.