ezgui not working as expected

[1ipt0n]

hi, I'm trying to make menu to choose level using ezgui.

my json:

var levelSelectScreenJSON = {	id: 'levelSelectScreen',	component: 'Window',	header: { position: { x: 0, y: 0 }, height: 40, text: 'Select Level' },	padding: 4,	position: { x: 20, y: 10 },	width: 430,	height: 300,	layout: [1, 10],	children: [		{			id: 'levelsList',			component: 'List',			dragX:false,			padding: 8,			position: {x:0, y:0},			width: 420,			height: 200,			layout: [4, 2],			children: [				{ id: 'lvl1', text: '1', userData: 'level1', component: 'Button', position: 'center', width: 80, height: 80},				{ id: 'lvl2', text: '2', userData: 'level2', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl3', text: '3', userData: 'level3', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl4', text: '4', userData: 'level4', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl5', text: '5', userData: 'level5', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl6', text: '6', userData: 'level6', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl7', text: '7', userData: 'level7', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl8', text: '8', userData: 'level8', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl9', text: '9', userData: 'level9', component: 'Button', position: 'center', width: 80, height: 80 },				{ id: 'lvl10', text: '10', userData: 'level10', component: 'Button', position: 'center', width: 80, height: 80 },			]		}, null, null, null,null,null,null, null,		{		 id: 'levelBack',		 text: 'Close',		 userData: 'level back',		 component: 'Button',		 position: 'left',		 width: 80, 		 height: 35		}, null	]}

and than:

// create Game function in BasicGameBasicGame.Menu = function (game) {};// set Game function prototypeBasicGame.Menu.prototype = {    init: function () {    },    preload: function () {    },    create: function () {        EZGUI.Theme.load(['lib/ezgui/assets/kenney-theme/kenney-theme.json'], function () {                        levelSelectScreen = EZGUI.create(levelSelectScreenJSON, 'kenney');            EZGUI.components.levelsList.bindChildren('click', function (event, me) {                levelSelectScreen.animatePosTo(-480, levelSelectScreen.position.y, 800, EZGUI.Easing.Back.Out, function () {                    levelSelectScreen.visible = false;                    game.state.start('Game', true, false, me.userData);                });                            });        });    }};

and it's working, problem is - I can only scroll my list with level buttons dragging inside part I marked on red on image. also clicking on buttons only wolking in this area.

 

What I'm doing wrong?

 

image:

[1ipt0n]

so i figured out that ezgui don't like my scaling. 

my init function :

game_width = 480;game_height = 320;....init: function () {        this.input.maxPointers = 5;        this.stage.disableVisibilityChange = true;        this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;        var  hscale = window.innerWidth/game.width;        var  vscale = window.innerHeight/game.height;        if(hscale<vscale)            vscale = hscale        else            hscale=vscale        this.scale.setUserScale(hscale,vscale,0,0);        this.scale.pageAlignHorizontally = true;        this.scale.pageAlignVertically = true;        this.scale.forceOrientation(true, false);        this.scale.refresh();    },

 

 

 

and the question is why? and how to fix this?