is it zoomed on the tablet (like is the browser zoom set to higher than 100%?)
at the top of the UI-lovelace.yaml there is the “mediaquery” section where it decides how to layout the UI based on what the resolution of the display is set to. I would say it is treating your laptop like a phone because the resolution reported is too low. to test you could set the “max-width” in the media query section to be lower to force it to use the “full screen” version
If you are using Fully Kiosk Browser check the Web Zoom and Scaling option. You should disable the View in Desktop Mode option
Yes, this did the trick. Thanks.
Now how do you make the sidebar icons at the bottom smaller? (the ones for vaccum, information and updates)
Hi, this is such a good dashboard, thank you so much! My fonts do not seem to be the same as yours, where do I find the font files for SF fonts and where do I add these files to? Thanks in advance!
Hey All,
Still pluggin through this massive dashboard setup. This is more of a debugging question, but how can I use the browser console to watch or output (via console or otherwise) some of the values in these scripts? (eg. “variables” array in button_card_templates.) I am trying to thoroughly understand this code so I can modify it for my situation.
@chezpaul2 - Great layout. This is close to what I am looking for.
@Mattias_Persson Hi, is it possible to show the loader spinning wheel during particular states? I have a door lock that have ‘locked’ ‘unlocking’ ‘unlocked’ ‘locking’, I want to always show spinning wheel during ‘locking’ and ‘unlocking’. Thanks.
icon_lock:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -2%
- margin-top: 0%
custom_fields:
icon: >
[[[
if (variables.state === 'locked') {
return `
<svg viewBox="0 0 57 57">
<path d="M16.5 28V12.601C16.5 6.77 21.675 2 28 2h0c6.325 0 11.5 4.77 11.5 10.601V28h-23z" fill="none" stroke="#9da0a2" stroke-width="4" stroke-miterlimit="10"/><path d="M7.5 25h42v32h-42z" fill="#9da0a2"/><path d="M28.5 45h0a3.01 3.01 0 0 1-3-3v-6a3.01 3.01 0 0 1 3-3h0a3.01 3.01 0 0 1 3 3v6a3.01 3.01 0 0 1-3 3z" fill="#3C3C3C"/><path d="M7.5 51h42v6h-42z" fill="#9da0a2"/>
</svg>
`;
} else if (variables.state === 'locking') {
return `
<svg viewBox="0 0 57 57">
<path d="M16.5 28V12.601C16.5 6.77 21.675 2 28 2h0c6.325 0 11.5 4.77 11.5 10.601V28h-23z" fill="none" stroke="#424a60" stroke-width="4" stroke-miterlimit="10"/><path d="M7.5 25h42v32h-42z" fill="#ebba16"/><path d="M28.5 45h0a3.01 3.01 0 0 1-3-3v-6a3.01 3.01 0 0 1 3-3h0a3.01 3.01 0 0 1 3 3v6a3.01 3.01 0 0 1-3 3z" fill="#424a60"/><path d="M7.5 51h42v6h-42z" fill="#ebba16"/>
</svg>
`;
} else {
return `
<svg viewBox="0 0 57 57">
<path d="M16.5 15.82v-3.219C16.5 6.77 21.675 2 28 2h0c6.325 0 11.5 4.77 11.5 10.601V25" fill="none" stroke="#424a60" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10"/><path d="M7.5 25h42v32h-42z" fill="#ebba16"/><path d="M28.5 45h0a3.01 3.01 0 0 1-3-3v-6a3.01 3.01 0 0 1 3-3h0a3.01 3.01 0 0 1 3 3v6a3.01 3.01 0 0 1-3 3z" fill="#424a60"/><path d="M7.5 51h42v6h-42z" fill="#ebba16"/>
</svg>
`;
}
]]]
This is an awesome setup! Been playing around with it the past few days and it works great!
Only thing I can’t seem to figure out: how can I remove Home Assistant’s own header and sidebar? The customer-header addon is no longer supported.
Can someone answer how “sensor.hass_version_installed” gets its data?
Update: Well mine works, but I do not understand how.
Thanks! Works for me as well!
This looks great and I’ve started experimenting with it. Can anyone give me some help as to where I can reduce the vertical gap between rows? I’d like to bring them closer to each other (for example the 2 rows belonging to a single grid card are too far apart for me)
I can only test on a virtual lock, but this should work?
template:
- loader
That did the trick. Thank you so much!
Awesome work by the way - it has many aspects of a UI that I’ve been trying to achieve for a long time 
You can replace e.g. return attr with console.log(attr)
values are clockwise - top, right, bottom, left
One more thing.
This seems to fix the spacing between title and first row (highlighted in yellow) but the gap between first and second row is still too big (highlighted in red). I would ideally like minimal spacing between rows like this: A different take on designing a Lovelace UI - #2255 by chezpaul2