Hey Mart,
I’m having the same issue, where did you fix this?
Thanks
@Mattias_Persson Just got into homeassistant and was blown away by your dashboard, got it up and running and looking real good on PC!
I’m stuck on one thing, and that is that the tap to hold action is not working. Whenever I hold a button which has a link to your /popup/somefile.yaml it doesn’t do anything unfortunatly. I’m not sure if I need to send you something as you are the creator obviously, but can you help me out? Or head me in the right direction with this? 
Tried to search through this large thread for the answer and I did not come up with it. That said forgive me if this has been asked/answered already. It seems when using the swipe animation card with button cards the haptic-feedback animations don’t work. Is there a workaround or a solution to this?
Hi, can you share your code, I don’t think the hold action is configured on all the templates so depending on how your using it it might not work.
At lest that how I think it works I am new to this and could be wrong.
Hi, do you have more details, can you post a gif? I haven’t noticed anything like what you described when using the swipe card in both the media player and my custom climate swipe card.
Hey,
Thanks for your reply.
Well, I just got his dashboard and everything works except the tap action (on all butons). It does not pop-up anything. I’m afraid I need some additional files for the pop-up to work or something.
- type: custom:button-card
entity: person.amy
name: Fanny
triggers_update:
- device_tracker.iphone_van_fanny_2
tap_action:
!include popup/bekhuis_fanny.yaml
variables:
retain: sensor.device_tracker.iphone_van_fanny_2_last_changed
template: person
This checks if my girlfriend is home. Matthias made a cool pop-up for a few buttons, when I click on it a pop-up should come forward showing GPS, battery etc… However, it does nothing. I’ve obviously changed the names of the files accordingly. It won’t even start with the wrong name in the popup/ folder. Am I missing something obvious here?
I mean this pop-up: https://raw.githubusercontent.com/matt8707/hass-config/master/www/img/tracker_updates.png
OK I’m really struggling with understanding the core of this UI. I can create custom buttons all day long but getting this to work on a variety of browsers/tablets (with and without kiosk mode) is really challenging me.
When I run in kiosk mode in 1280x800 (tablet) resolution, everything looks fine:
When I run in non-kiosk mode, the buttons are fine but the status bar is too long by the exact height of the top bar:
I can’t figure out where in the code to account for this height. I prefer running on the tablet in non-kiosk mode so I’d like to be able to take into account the height of the header.
Check the grid-template-areas right at the beginning of the code. What determines how long or wide row / column will be is its extension across grid areas.
- type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar vardagsrum studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
In this case taken from the original code, you can see the sidebar extends across all four rows but only the first column whereas the footer extends across the last 3 columns because the first column of the last row is also taken by the sidebar. To determine the height of the first row (for example) you might want to play around with the first parameter of grid-template-rows which is 0 in the excerpt I pasted above. In my case I gave it a small percentage (7% in my case below) based on the device (for each of “default”, “portrait” and “phone” and that worked very well for me to give me a top status bar as follows:
Maybe I wasn’t clear. I’m talking about the lovelace default header where you can refresh the UI. I can do what you’ve done and I’ve played around with every combination of grid-template-area values that I can think of. Something just isn’t taking into account the header-height. If I look in the javascript of kiosk-mode.js, I find this:
#view{min-height:100vh !important;--header-height:0}
But this code only fires when hideHeader is true in the kiosk-mode.js file. This is what I’m looking for, I think… I want to put that in my theme so the theme always takes into account the height of the header.
I’m also struggling with understanding the themes.yaml and when certain CSS is applied… I am using the light-popup-card for the hold action on my custom buttons… According to the theme, this CSS should be injected into that light-popup-card:
light-popup-card$: |
#popup {
margin: -2em 0 2.5em 0;
isolation: isolate;
padding-bottom: 1vw;
background-color: red;
}
I added the background-color: red to visually show me if the CSS is being inserted or not. No change to the light-popup-card. Can someone explain how this works to me? I know the button_card_template “light” sets this up and I’m using that button_card_template but for the life of me, I don’t see this CSS being inserted.
Thanks, but all credits go to Mattias! I just added some parts to his great work.
I can share the file with all code, but I have changed quite some code. So that will take you some time to check and adopt if you are already using the originil file. Are there specific parts you are interested in? Maybe I can have a look and share the relevant parts.
Somebody who can help me with the pop-up cards? When clicking no new window will “pop-up”… I have no clue where to start as I just straight copied his work and “should work out the box” I guess?
And where are all the icons stored?
@ henkkeumus i just want to confirm that you have “browser mod” the HACS intergration installed that is needed for the popups.
icons are in button_card_templates.yaml starting at line 1390
Hey @Mattias_Persson!
Loving this new take. I’m wondering if you’ve played with a way to hide certain cards that may not scale well based on the size of the display being utilized to view the dashboard and what a good way to go about doing that may be?
Any input would be awesome.
Thanks a million,
Corey
Hey Corey,
There is a way to do this with the state-switch card.
I do it like this in my other dashboard Neon Lovelace UI & Theme for tablets
- type: custom:state-switch
view_layout:
grid-area: kalender
entity: mediaquery
states:
'(min-width: 1100px)':
type: custom:atomic-calendar-revive
entities: calendar.ical_daniel_kalender
maxDaysToShow: 100
maxEventCount: 4
disableEventLink: true
disableLocationLink: true
showRelativeTime: false
showCurrentEventLine: false
showProgressBar: false
showWeekDay: true
showHiddenText: false
dayWrapperLineColor: transparent
dateSize: 150
fullDayEventText: Hela dagen
noEventsForTodayText: Inga händelser idag!
noEventsForNextDaysText: inga händelser kommande dagar!
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
background: transparent;
margin-top: -15px;
margin-left: -22px;
font-size: 12px; }
.hoursHTML {
font-weight: bold;
background: rgb(0,0,0,0.2);
border-radius: 5px;
padding: 5px;
}
.event-left {
text-transform: lowercase;
text-align: left !important;
}
'(min-width: 800px)':
type: custom:atomic-calendar-revive
entities: calendar.ical_daniel_kalender
maxDaysToShow: 100
maxEventCount: 4
disableEventLink: true
disableLocationLink: true
showRelativeTime: false
showCurrentEventLine: false
showProgressBar: false
showWeekDay: true
showHiddenText: false
dayWrapperLineColor: transparent
dateSize: 150
fullDayEventText: Hela dagen
noEventsForTodayText: Inga händelser idag!
noEventsForNextDaysText: inga händelser kommande dagar!
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
background: transparent;
margin-top: -82px;
margin-left: -22px;
font-size: 12px; }
.hoursHTML {
font-weight: bold;
background: rgb(0,0,0,0.2);
border-radius: 5px;
padding: 5px;
}
.event-left {
text-transform: lowercase;
text-align: left !important;
}
I guess you can also use card-mod and add
@media (max-width: 800px) { … } together with display: none but i have not tried it myself.
The extra styles field in the custom_button should also be able to to this.
Hey there,
I just made an icon for some blinds, but they dont scale with the page properly. Is there any setting enable it? I didnt see any with the other svg icons
1 Like
COOOOL
SO if I understand correctly, I can nest card_mod cards inside a state-switch card and use the
states:
'(min-width: 1100px)':
To define the max or min width where the entire state switch would be displayed?
I did manage to fix this. For the people with the same problem: The problem was this part of the svg, illustrator generated
<svg id="ecd9de83-d9dc-4bcf-ae4e-56c92cf68072" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="150" height="90" viewBox="0 0 206.43 87.53">
It just needs to be like this (with different values)
<svg viewBox="0 0 206.43 87.53">
well, you dont need card-mod to use min-width etc in the state switch card. That is a feature of the card itself.
if you dont would like to use the state-state swtich card i think you can do about the same thing with card mod using the css and min-width/max-width. But i have not tried that myself but i should be possible, look in matthias theme file for some inspiration, he does exactly that.
If you use the custom:button-card you can do it like this:
type: custom:button-card
extra_styles: |
@media screen and (max-width: 1200px) {
#card {
display: none; }
}
this card is only shown if the screen is at minimum 1200px in width.
1 Like