search

eez-open / studio

Cross-platform low-code GUI and automation
https://www.envox.eu/studio/studio-introduction/
GNU General Public License v3.0
540 stars 92 forks source link

Dashboard - List Object Alignment #590

Open MatinatorX opened 1 week ago

MatinatorX commented 1 week ago

Describe the bug It's possible I'm missing something, but when using the List widget in Dashboard projects, objects in the list do not seem respect horizontal or vertical alignment and are always top-left justified. Perhaps I'm missing something?

To Reproduce Steps to reproduce the behavior:

  1. Create a new dashboard project.
  2. Create a local array:string variable with a few entries as default value (ex: ["Option 1", "Option 2", "Option 3"])
  3. Drop a List object onto the page. Enlarge it to match the page size (ex: 900x600)
  4. Configure the Data property of the List object to use the string array. Set a gap of 10.
  5. In the Style properties of the default container created inside the list object, set a background color other than white so it is visible.
  6. In the Style properties of the list object, change the vertical/horizontal alignment to any value besides top/left.
  7. Switch to the Run tab. The container objects inside the list object do not follow the alignment setting.

Expected behavior Objects within lists should respect the vertical/horizontal alignment setting or have another method to set alignment.

Screenshots image image

Desktop (please complete the following information):

LVGL version (if used) N/A

Additional context Off topic, but I am extremely impressed so far with this GUI builder and the slick Flex block programming, it's been a joy to learn and use. I hope the standalone dashboard compiler gets fleshed out and integrated into the main Studio interface at some point, this could really be a game changer for high end HMI projects!

mvladic commented 1 week ago

List orientation can't be controlled with the CSS. You should use "List type" property:

image

mvladic commented 1 week ago

We should allow using CSS not only for styling widgets but also for positioning, alignment, etc in the Container, List and Grid widgets. That means, instead of only absolute positioning child widgets it should also be possible to use display: flex, display: grid, etc...