search

s00500 / ESPUI

A simple web user interface library for ESP32 and ESP8266
https://valencia.lbsfilm.at/midterm-presentation/
Other
896 stars 166 forks source link

horizontal alignment of switcher control #291

Closed dewenni closed 7 months ago

dewenni commented 7 months ago

I am struggling with a little design problem. If you place several controls next to each other, the switcher control is not on the same horizontal line as the other controls.

image

I have also not yet managed to find the right css attribute with "setElementStyle" to change this. Does anyone have an idea how to get the switcher control in line with the other controls?

iangray001 commented 7 months ago

I would assume margin-top: 10px; would do it. Maybe padding-top: 10px;. Tweak the 10 to line it up.

If you inspect the page in your web browser you can play with the styles to figure out what works then once you know, add it to your ESPUI code.

dewenni commented 7 months ago

Thank you very much for your quick response and the advice. Unfortunately, this does not solve the problem. I have also played with the developer functions of the browser. Here are the results of margin and padding

image

margin-top adds an additional space for all controls to the separator above

image

padding-top enlarges the control

any other ideas?

dewenni commented 7 months ago

position: "fixed" instead of "relative" and additional margin-top:6px did the trick

image image

[!NOTE] update: I was wrong, it is not a proper solution. If you scroll down, the control stays "fixed" as the name suggests :-) "position:absolute" seems to work for me

iangray001 commented 7 months ago

Ha yes "fixed" will keep it in the same place in the viewport! absolute will anchor it from its normal position and then shift from there so that should work.