Height 50% on HLayout does not work

Technical Q&A
1

I expect the red part to only take up 250 in height but it takes up the whole 500px

isc.VLayout.create({members:
[isc.HLayout.create({ID:"HorizontalLayout",name:"HorizontalLayout",
canFocus:true,backgroundColor:"red",title:" ",canHover:true,showResizeBar:false,height:"50%",width:200})],
ID:"content",title:" ",backgroundColor: "blue",overflow:"auto",height:500, width: "100%"})
2

This seems to be a common problem. Below is the same example but with tabset. I’ve also tried it with SectionStack and produced the exact same issue.

isc.VLayout.create({members:
[isc.TabSet.create({ID:"HorizontalLayout",name:"HorizontalLayout",tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", 
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Green", icon: "pieces/16/pawn_green.png",
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})}
    ],
canFocus:true,backgroundColor:"red",title:" ",canHover:true,showResizeBar:false,height:"50%",width:200})],
ID:"content",title:" ",backgroundColor: "blue",overflow:"auto",height:500, width: "100%"})
3

Also, we are using Build 6-14

4

HLayouts/VLayouts always resize their members to fill all the available space. The solution is to use LayoutSpacer as a second member or VStack instead of VLayout.

5

I don’t agree with you. If the parent layout is set to 100%, there is an actual fixed size that is given to it (judging from the JavaScript Debugger)…therefore if the child says to use 50% of the parent layout’s width/height, then it shouldn’t be so difficult to do this.

6

Marpetr is correct. The purpose of a Layout is to fill all available space. If you don’t want that, a Canvas parent allows children to manage their own sizes. See also the Stack classes.

7

I’m not sure I understand…what is the point of height/width property at this point if the layout will only adhere to the “available space”?

If I use a canvas, won’t I lose the horizontal/vertical alignment?

8

A fixed height will cause the component to take only that fixed space. Percentages are proportions of available space.

You can align components within a Canvas via percentage left/rite or snapTo positioning, or for stacking behavior, see Stack.

9

“Percentages are proportions of available space” - precisely why I’m confused. if I am assigning “50%” height, I should expect to see the layout taking up 50% of the available space..

10

“proportions”, not percentages. There’s only one component, so 50/50 = 100%.

It is explicitly explained in the docs that a layout will policy “fill” attempts to fills the available space. There’s no point in posting further about this - we’ve already explained how to easily get the behavior you want, and the component you keep asking about is working as designed and as documented.