I try to setup the overview page in a way that I can use it for smartphone (portrait) and tablet (landscape). Therefore I proceeded a lot already by reading the community contributions already.
Something I try to handle: Set the widget height depending on the number of columns, fallback would be screen width. I could not find a way of doing so.
My workaround that I do not like as it just works as the tablet app is using webview:
There is no built-in configuration for this, widget heights are mostly independent of screen size.
The work-around that you’ve shown is one perfectly good way of making this happen.
One other option I’ve never tried (but should work) would be to use a media query in a stylesheet to override the height of any widget that you have assigned a specific class. Then it could match your cols definitions. For example:
The stylesheet property can be added to the config section of most pages and components. In this case, if you have many widgets on one page that you want to set the height of it makes the most sense to add it to the page config. You will have to do it in the yaml editor for the page, there is no UI access to it.
For the record you don’t need to define all those 100% settings as each will simply inherit or override the previous ones, in the order in which they are presented, if that makes sense.
So here you would simply define Width and Width (XL) and leave the others blank.
No harm done if you do define them though, you just define a bunch of CSS that’s not necessary.
You have the class property inside the style object (and possibly confused with the padding style), which probably means that your classes are not being assigned properly. The class property should be a direct child of the config:
You are still setting the height of the card directly in the widget. That declaration will take precedence over the the scope of the declaration from the media query. Either remove the height style from the widget or, if you need that height style for other reasons, use 500px !important; in the style sheet.
Thanks, got it working!
Actually I always saved the widget anyhow and tried the page but have not reloaded. I saw some unclear behaviour as the widget redraws automatically every ca 5 sec => explained now.