Visual issue with small displays

[frafall]

Hey, I’ve built a virtual remote in node-red based on mqtt transport. To have an UI I made a small script based layer in home assistant and made the UI in dashboard running on an iphone 3gs. Btw, really looking forward to use the mqtt in appdaemon instead

So, it all works as a charm except the UI, I’ve set widget_dimensions to [59, 59] with 5 columns to get enough buttons on the small display, but, alas, the icon placement turns out to be difficult.

It turns out there is quite some absolute positioning in the css which results in the icons and the buttons being misaligned, icons considerably (43px) below buttons.

I’ve checked out with multiple skins with same result.

So, any hints on how to align buttons and icons for a custom skin? I’ve built the custom skin but missing css for the alignment.

I am not using any titles on the buttons, small UI and symbols should be enough.

best regards,
frafall

[frafall]

Well, simple solution was to make my own “button” widget based on the switch widget and strip the title* and positioning stuff, works like a charm.

-frafall

[ReneTode]

a better way is to set the css fo a widget.
with things like:

icon_style_active: “top: 0px; font-size: 20px; height: 100%”
icon_style_inactive: “top: 0px; font-size: 20px: height: 100%”

then it will work with every skin.
and stripping the title wouldnt be neccesary also.

here is an examply from my generic remote.

works with every skin.