Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard - List Object Alignment #590

Open
MatinatorX opened this issue Oct 14, 2024 · 2 comments
Open

Dashboard - List Object Alignment #590

MatinatorX opened this issue Oct 14, 2024 · 2 comments
Assignees
Labels

Comments

@MatinatorX
Copy link

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):

  • OS: Windows 10 Pro
  • Version 0.18.12 and older (not tested below 0.17.0

** 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
Copy link
Contributor

mvladic commented Oct 14, 2024

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

image

@mvladic
Copy link
Contributor

mvladic commented Oct 14, 2024

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants