Problem with clickable elements inside a window/layout?

[Shadowstep33]

Hi, maybe I'm just doing something wrong here. Not fully sure how to describe this one so code dump incoming:

        "monster-menu": {
            id: "monster-menu",
            EZGUI: null,
            createWindow: function(args){
                var wH = MIRend.renderer.height * 0.8;
                var wW = wH;
                return {
                    id: args.id,
                    component: 'Window',
                    skin: 'MonsterManageWindow',
                    draggable: false,
                    position: { x: (MIRend.renderer.width - wW)/2, y: (MIRend.renderer.height - wH)/2 },
                    width: wW,
                    height: wH,
                    children: [

                    ]
                };              
            },
            createChildren: function(args){

                //Add build btn
                //Add battle btn
                //Add research btn
                //Add adventure btn
                var wH = MIRend.renderer.height * 0.8;
                var wW = wH;

                var bW1 = MIRend.renderer.width * 0.07;
                var bH1 = bW1;

                var bW2 = MIRend.renderer.width * 0.04;
                var bH2 = bW2;

                var close_menu = {
                    id: 'close-menu',
                    image: '../securetest/images/monster_view/skills1_icon.png',
                    component: 'Button',
                    position: {x: wW * 0.95, y: wH * 0.15},
                    wH: 50,
                    wW: 50
                };

                var nav_bar = {
                    id: 'monster-nav-list',
                    position: {x: wW * 0.07, y: wH * 0.15 },
                    component: 'List',
                    width: wW * 0.9,
                    height: wH * 0.2,
                    layout: [6,1],
                    //Buy btn must contain
                        //Name
                        //Can Build X
                        //Price
                        //Image
                        //El flag is applicable
                    children: [
                        MIMen.templates['nav-bar-btn']({
                            id: 'stats-nav-btn',
                            text: 'Stats',
                            img: '../securetest/images/monster_view/stats_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'skills-nav-btn',
                            text: 'Skills',
                            img: '../securetest/images/monster_view/skills1_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'boost-nav-btn',
                            text: 'Boost',
                            img: '../securetest/images/monster_view/boost_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'move-nav-btn',
                            text: 'Move',
                            img: '../securetest/images/monster_view/movemonster_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'storage-nav-btn',
                            text: 'Storage',
                            img: '../securetest/images/monster_view/storage_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'sell-nav-btn',
                            text: 'Sell',
                            img: '../securetest/images/monster_view/sell_icon.png',
                            wH: wH,
                            wW: wW
                        })
                    ]            
                };
                //Child components:
                    //Nav bar
                    //Monster Portrait

                    //Monster Info
                        //Monster Stats
                    //Feed Rigg
                    var feed_rigg = {
                        id: 'feed-container',
                        position: {x: 0, y: (wH * 0.8) - (wH * 0.2) },
                        component: 'List',
                        width: wW,
                        height: wH * 0.2,
                        children: [
                            {
                                id: 'feed-btn',
                                component: 'Button',
                                skin: 'ClearButton',
                                width: (wW * 0.9) * 0.16,
                                height: wH * 0.15,
                                position: {x: 0, y: 0},
                                children: [
                                    {
                                        id: "feed-btn-txt",
                                        text: 'Feed',
                                        position: {x: 0, y: 40}
                                    },
                                    {
                                        id: "feed-btn-img",
                                        image: 'feed.png',
                                        position: {x: 0, y: 0}
                                    }
                                ]
                            },
                            {
                                id: 'feed-bar-container',
                                position: {x: 0, y: 0},
                                component: 'List',
                                height: wH,
                                width: wW,
                                children: [
                                    {
                                        id: 'feed-bar-empty',
                                        image: 'feed_bar_empty.png',
                                        component: 'Layout',
                                        position: {x: 0, y: 0},
                                        wH: wH,
                                        wW: wW
                                    },
                                    {
                                        id: 'feed-bar-full',
                                        image: 'feed_bar_'+GMan.selected_monster.element.toLowerCase()+'.png',
                                        component: 'Layout',
                                        text: 'feed',
                                        position: {x: 0, y: 0},
                                        wH: 300,
                                        wW: wW
                                    }                                  
                                ]
                            }
                        ]
                    };

                        //Feed Btn
                        //Feed Bar
                var monster_portrait = {
                    id: "monster-portait",
                    position: {x: 0, y: (wH * 0.4) },
                    component: 'List',
                    width: wW * 0.6,
                    height: wH * 0.5,
                    layout: [1,1],
                    children: [
                        MIMen.templates['nav-bar-btn']({
                            id: 'sell-nav-btn',
                            text: 'Sell',
                            img: '../securetest/images/monster_view/sell_icon.png',
                            wH: wH,
                            wW: wW
                        })  
                    ]
                };

                var monster_portrait_container = {
                    id: "monster-portrait-container",
                    position: {x: 0, y: wH * 0.2 },
                    component: 'List',
                    width: wW * 0.6,
                    height: wH * 0.8,
                    children: [
                        monster_portrait,
                        feed_rigg
                    ]
                };

                var monster_stats = {
                    id: 'stats-list',
                    component: 'Layout',
                    position: {x: wW * 0.6, y: wH * 0.45},
                    width: wW * 0.4,
                    height: wH * 0.16,
                    layout: [2,2],
                    children: [
                        {
                            id: 'hp-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/health_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    image: '../securetest/images/monster_view/health_stat.png',
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round(GMan.selected_monster.health),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        },
                        {
                            id: 'dmg-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/attack_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round((GMan.selected_monster.damage + GMan.selected_monster.e_damage)/2),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        },
                        {
                            id: 'def-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/defense_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round((GMan.selected_monster.defense + GMan.selected_monster.e_defense)/2),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        },
                        {
                            id: 'spd-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/speed_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round(1/GMan.selected_monster.speed),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        }
                    ]
                };

                var monster_info = {
                    id: 'monster-info',
                    component: 'Layout',
                    position: {x: wW * 0.6, y: wH * 0.25},
                    width: wW * 0.4,
                    height: wH * 0.16,
                    children: [
                        {
                            id: 'monster-name-'+GMan.selected_monster.id,
                            width: bW1 * 0.16,
                            height: wH * 0.15,
                            position: {x: 0, y: 0},
                            text: GMan.selected_monster.name,
                            position: {x: 0, y: 0},
                            component: 'Label'
                        },
                        {
                            id: 'monster-rarity-'+GMan.selected_monster.id,
                            text: "Rarity",
                            width: 100,
                            height: 100,
                            position: {x: 0, y: 25},
                            component: 'Label'
                        },    
                        {
                            id: 'monster-type-'+GMan.selected_monster.id,
                            text: "Type",
                            width: 100,
                            height: 100,
                            position: {x: 50, y: 0},
                            component: 'Label'
                        }
                    ]
                };

                var monster_info_container = {
                    id: "monster-info-container",
                    component: "Layout",
                    position: {x: 0, y: 0 },
                    width: wW,
                    height: wH,
                    children: [
                        monster_info,
                        monster_stats
                    ]
                };


                return [close_menu, nav_bar, monster_portrait_container, monster_info_container];
            },
            addListeners: function(){

                if(EZGUI.components['feed-btn']){
                    EZGUI.components['feed-btn'].on('mouseup',function(data){
                        //Feed Monster this.settings.dataid
                        console.log("Feed monster "+this.settings.dataid);
                    }); 
                }

            }                    
        },

It's kind of a lot of code but pretty simple. I call createWindow(), then createChildren(), then addListeners(). I have another menu that works as expected with clickable elements, but they are free floating (the top level of their menu being a Layout). All of the menus having clickable problems have a top level of Window. When I set that element to Layout though, no difference so I'm pretty sure it's not that.

[Shadowstep33]

@alaa-eddine you must be doing a great job answering my questions as I was able to figure this one out on my own as things are starting to become more clear now :)

The problem is the child elements blocking clicks for their parent. To solve, make the child elements component: "Label"!