Layout Tools

[kaiakz]

I would like to provide more ways to design the layout.

Position

Now, walv only supports setting the x and y coordinates of the widget(relative to the parent). LittlevGL also can align the object to another with lv_obj_align, see

[excitedbox]

It is frowned upon now to do so in web design but you can use absolute positioning in CSS to do that. position: absolute aligns the element to the parent element and all other elements act as if it doesn´t exist so their position is not affected.

This was a very popular design method back when I started doing web design in the early 2000s when divs were the hot new thing. Before that we used Tables.

2/3 down the page. https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/

[kaiakz]

@excitedbox I see, thanks! For relative layout, I am designing a tool like this: It uses a matrix radio button group to represent how an object aligns with another.

[excitedbox]

oh that is cool. Have you taken another look at why the widgets turn invisible when closing the style editor?

I still think creating the widgets is much easier with a sidebar pallet like Grapejs does with the icons you drag to the canvas. You could probably implement something like that in a few minutes with the dragula or draggable JS libs. or using purely CSS and HTML5 it should be rather easy to do.