top or bottom gap issue in the List component..
fkkcloud opened this issue · comments
How would I control the gap ? (see the attached photo)
it depends on how you are implementing your layout.
can you share the layout configuration please ?
@alaa-eddine This is how I have it. (Also see the attached photo)
As you see I have phaser game screen above and have menus below.
But I think that does not matter to this issue but FYI.
What would be my good one to modify? Btw, awesome open source! Its helping me tons and tons :)
/* main screen ----------------------------------------------------------------------------------------------- */
var mainUIScreenJSON = {
id: 'mainScreen',
component: 'Window',
padding: 2,
position: { x: 0, y: 240 },
width: 400,
height: 400,
//layout: [null, null],
children: []
};
/* footer Menu ----------------------------------------------------------------------------------------------- */
var footerMenuJSON = {
id:'footerMenu',
component: 'Layout',
z: 1,
padding: 1,
position: { x: 0, y: 340 },
width: 400,
height: 60,
layout: [6, 1],
children: [],
};
for (var i = 0; i < footerMenuDataJSON.length; i++){
var menuName = footerMenuDataJSON[i];
var button = {id: menuName.id, text: menuName.name, component: 'Button', position: 'center', width: 64, height: 40 };
footerMenuJSON.children.push(button);
}
mainUIScreenJSON.children.push(footerMenuJSON);
/* list - quest ----------------------------------------------------------------------------------------------- */
for (var j = 0; j < listsJSON.length; j++){
var listUI = {
id:listsJSON[j].id,
component: 'List',
padding: 2,
position: { x: 0, y: 0 },
width: 400,
height: 340,
layout: [null, 5],
children: []
};
for (var i = 0; i < listsJSON[j].data.length; i++){
var itemData = listsJSON[j].data[i];
var questName = { id: itemData.itemLabelId, text: itemData.itemName, component: 'Label', position: 'center', width: 100, height: 30 };
var questLevel = { id: itemData.itemBtnId, text: 'Upgrade', component: 'Button', position: 'right', width: 100, height: 30 };
var item = {
component: 'Layout',
padding: 2,
position: { x: 0, y: 0 },
width: 400,
height: 68,
layout: [2, null],
children: [
/* quest name */
questName,
/* quest level */
questLevel,
]
}
listUI.children.push(item);
}
mainUIScreenJSON.children.push(listUI);
}
I see now, I thought first that the gap you are having was always visible....
well the issue you have here is due to the way the scroller works, there is no option to do it cleanly, I'll check the code and see if I can add this as option or provide you with a hack.
your game seems really great ! if you want I can feature it on EZGUI official page, just ping me when it's released :)
Just checked the code, try this.
after adding your listUI to the main screen.
try adding/substracting some value to listUI.container.height this is supposed to limit the scrollable area.
let me know if it helps
@alaa-eddine
It seems like listUI does not have property called 'container', where would I approach to this?
Thanks, I will definitely let you know when the game is ready :)
EZGUI.components.listQuest.container.height += 10; // listQuest is the id of the UI.
It modifies component height but it stretches the images.
@alaa-eddine I am still having the height gap issue. Let me know if there is any other suggestions.
As you see I have bottom UI as below attached image and each task has its loading bar. What would be great component to represent a loading bar? I am thinking of putting an image into "Layout" and animate it.
[the goal for my UI of each task in the list]
