horizontal alignment of switcher control

[Sven T.]

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.

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?

[Ian Gray]

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.

[Sven T.]

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

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

padding-top enlarges the control

any other ideas?

[Sven T.]

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

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

[Ian Gray]

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.