Pulldown (List) in wrapper

Questions
1

I want to build a menubar with buttons and pulldown in a wrapper (red background)

  • How can I valign in middle the item pulldown (List) in closed condition? And stand at this position when I open the list?
  • How can I see a vertical scrollbar? The count of the items is 8 and viewNum is 5. noScale has no effect.
  • How can I achive, that onMouseLeave the pulldown is close?

In index.d.ts in export class List extends missing pulldownToggle?: boolean, noScale?: boolean

let container = new Container(0, 0, 900, 800).pos(100,100);
new Rectangle(700, 100, "#f99").addTo(container); // show menu size (as menuBarWrapper) and set background color

let menuBarWrapper = new Wrapper({
	width: 700,
	height: 100,
	align: LEFT,
	spacingH: 10,
	valignInner: TOP
}).addTo(container);

let button1 = new Button({
	label: new Label({text: "ok", bold: true, align: "center", color: "#444"}),
	width: AUTO,
	autoPaddingH: 20
})

let data = {
	"MONSTERS":["Ghost", "Ghoul", "Vampire", "Werewolf", "Skeleton1", "Skeleton2", "Skeleton3", "Skeleton4"]
}

let pulldown = new List({
	list: {menu:data, bloom:true, whither:true},
	pulldown:true,
	pulldownToggle: true,
	viewNum: 5,
	// height: 200,
	noScale: true,
});

let button2 = new Button({
	label: new Label({text: "PPP", bold: true, align: "center", color: "#000"}),
	width: AUTO,
	autoPaddingH: 20
})

let objs = [];
objs.push(button1, pulldown, button2)
menuBarWrapper.add(objs)
2

A List() is a fairly complex component and needs update() called if it is moved with code - which may be the case when put in a Wrapper - which is also quite complicated. I have never tried one in a Wrapper.

Have you got the two things working independently? Make sure your list works just alone, centered on the stage. Make sure your wrapper works just with using Rectangles. Once they are both working try joining. Let me know. I am in the middle of things here... but will try and look later on.

My advice is if it is two things and all you are trying to do is wrap the list underneath - is try and do it manually inside a F.on("resize", f) event.

3

Ok - thanks for the infos.
I have an idea: Instead of the dropdown menu, I'll insert a rectangle inside the wrapper. Outside the wrapper, I'll create a pulldown menu the same size as the rectangle and move it to the rectangle's coordinates. Changes made inside the wrapper will then be reflected in the pulldown menu's position.
I'll try it out when I have time.

1 Like
4

Just looking for the update method... not sure I see it - there is a resize and update on the Window (which the List extends) but... I know there was some trick... maybe it was to listl.enable=false then animate or move and then list.enable=true when done.