vertical groups for number, text fields or positioning of controls

[knopserl]

Although I like this simple and easy to use WEb-UI Lib, I miss some essential features or at least I don't know how to solve it with the current version which is creating some forms with ordered, positioned fields without having panels for each control.

An example: In a settings tab, I wanted to create a vertical ordererd field list with some number fields (IP-Address, Network-Mask, Gateway, DNS etc.) I wanted that in a group called network settings and I wanted the input fields vertically ordered.
I guess that is not yet supported for number and text and as a result, the fields are ordered horizontally.
It would be very nice if all fields could be placed with a kind of postion or at least in columns nad rows (like a grid or table) and the rows and colums should be sizable so that some positioning is possible. Currently this is extremly limited,
Also only normal or wide (boolean) is supported and not a width.
BTW: A IP-Address control would be also very nice as this is needed in almost every application.

see how much space that is using instead of one group "Network Settings" und 4 fields + save. Each text or number field needs of course a label on the left side:

[Ian Gray]

So the library was designed (I presume) to be very lightweight, and not include an entire layout engine. That said I'm always interested if people can think of small, backwards-compatible changes, to improve flexibility.

However, I think the thing that you want actually is supported.

The Grouped Controls feature lets you put multiple controls into a single panel, and then style them however you want:
https://github.com/s00500/ESPUI/raw/master/docs/ui_groupedbuttons3.png

[knopserl]

unfortunatly it is not yet supported (at least not that I'm aware) and I think the thing I wanted to do is a very very basic requirements.
Place in one panel just a list of fields vertically with a prompt on the left side (in front of the input field)
The current "vertically support" is only for sliders and switches (as shown in the examples) and not for text, numbers etc.

Something like:

or this is an exact sample: just prompt + input fields, and next prompt + field in next line (vertically), no complicated layout management just rows and cols like a grid/table or a way to specify which control should be placed in next rows (opens a new row)

[Ian Gray]

Well as I said, this project is not a UI framework. If you want a layout engine, use HTML and CSS.

	String labelStyle = "background-color: unset; width: 20%;";
	String inputStyle = "width: 70%;";

	auto exgroup = ESPUI.addControl(Label, "Example Group", "Val 1", None, maintab);
	ESPUI.setElementStyle(exgroup, labelStyle);
	ESPUI.setElementStyle(ESPUI.addControl(Text, "", "", Peterriver, exgroup, generalCallback), inputStyle);

	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "Val 2", None, exgroup), labelStyle);
	ESPUI.setElementStyle(ESPUI.addControl(Text, "", "", Peterriver, exgroup, generalCallback), inputStyle);

	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "Val 3", None, exgroup), labelStyle);
	ESPUI.setElementStyle(ESPUI.addControl(Text, "", "", Peterriver, exgroup, generalCallback), inputStyle);

You can add more CSS to tweak the arrangement, but this is the minimal.

Note that in preparing this for you I found a small bug in applying styles to text elements, for which I just created a PR. So use that code if you want to play around and it hasn't been merged yet.

[knopserl]

@iangray001 thanks, that looks already like I was looking for and will use your styles as well as your PR code.
Other than that, I'm fine with the features provided by the library, as it is simple to use and helpful and saves time.

Here is the desired result