Problem with Horizontal Layout

[acarur01]

Run the code below - there is a menu with label "GridLayout" being pushed to a negative y-position (screenshot attached). if I remove "defaultLayoutAlign" then it works properly - shows all the menus from the very first, and provides a scrollbar for others that cannot be shown within the 100px layout limit.

isc.HLayout.create({ID:"HorizontalLayout",
name:"HorizontalLayout",title:" ",
canHover:true,showResizeBar:false,height:1,width:"100%",overflow:"visible",
members:
[isc.HLayout.create({ID:"HorizontalLayout1",
name:"HorizontalLayout1",title:" ",canHover:true,showResizeBar:false,height:100,width:"100%",
overflow:"auto",defaultLayoutAlign:"center",members:
[isc.VLayout.create({ID:"VerticalLayout1",name:"VerticalLayout1",title:" ",
canHover:true,showResizeBar:false,height:1,width:1,members:
[isc.MenuButton.create({ID:"GridLayout",
canFocus:true,title:" Grid Layout",showDown:false,showFocused:false,showEmptyMessage:false,showRollOver:false,
autoFit:true,baseStyle:"CwMEIDef",align:"bottom",showMenuButtonImage:false}),
isc.MenuButton.create({ID:"HorizontalLayoutTest",canFocus:true,title:" Horizontal Layout",
showDown:false,showFocused:false,showEmptyMessage:false,showRollOver:false,autoFit:true,
baseStyle:"CwMEIDef",align:"bottom",showMenuButtonImage:false}),
isc.MenuButton.create({ID:"HorizontalLayoutTest2",canFocus:true,title:" Horizontal Layout",
showDown:false,showFocused:false,showEmptyMessage:false,showRollOver:false,autoFit:true,
baseStyle:"CwMEIDef",align:"bottom",showMenuButtonImage:false}),
isc.MenuButton.create({ID:"HorizontalLayoutTest3",canFocus:true,title:" Horizontal Layout",
showDown:false,showFocused:false,showEmptyMessage:false,showRollOver:false,autoFit:true,
baseStyle:"CwMEIDef",align:"bottom",showMenuButtonImage:false}),
isc.MenuButton.create({ID:"HorizontalLayoutTest4",canFocus:true,title:" Horizontal Layout",
showDown:false,showFocused:false,showEmptyMessage:false,showRollOver:false,autoFit:true,
baseStyle:"CwMEIDef",align:"bottom",showMenuButtonImage:false}),
isc.MenuButton.create({ID:"HorizontalLayoutTest",canFocus:true,title:" Horizontal Layout",
showDown:false,showFocused:false,showEmptyMessage:false,showRollOver:false,autoFit:true,
baseStyle:"CwMEIDef",align:"bottom",showMenuButtonImage:false})
]})]})]});

[Isomorphic]

Please don't post generated code - it's a pain to work with.

You can see what's going on in the watch tab: the VLayout is 132px high in a Layout with 100px height, so centering it is to place it at -16px.

[acarur01]

but overflow is set to auto..does this not mean that whatever is left of the 132px that does not fit in the 100px layout get generated within the scrollbar?

[acarur01]

I have looked up the documentation for overflow property:

"auto" Horizontal and/or vertical scrollbars are displayed only if necessary. Content that extends beyond the remaining visible area is clipped.

This indeed is what is happening. My next question is, how do I get the behaviour of "overflow:scroll" without always showing the scrollbar? "overflow:auto" only shows when necessary but scroll always shows the scrollbars.

[Isomorphic]

If you avoid centering the content, you will be able to scroll to it. The problem is that you are centering the content in a space that's too small, so part of it winds up offscreen, in a direction where you can't scroll.