I seem to have the same issue. First time playing with this theme (spent the day configuring it, so much fun!). Everything else seems to be working as expected. But the popups have never worked for me, not sure what I could be doing wrong 
Thanks everyone for all the support here, and even a bigger thanks to @Mattias_Persson for sharing this in the first place!
Mine has always worked. It’s just since I added the swipe card that they stopped working. and only on the swipe card position.
Hi @Mattias_Persson,
I am attempting to adapt your UI to my tablet (also 1920x1200) but I see it does not fit well, most of the screen stands outside of the visible area. I think this has already been discussed among the thousands of messages (which I have read them all). Would you be so kind to point me to the right direction/post, please? What are the settings in the theme to scale it all down? Thanks!
Can you post a fullscreen screenshot?
You forgot return states['sensor.wohnzimmer…
…and the three brackets
Also why do you need the light template on a fan? 
indeed, it was a bad indentation.
Thank
Hi, this dashboard looks very nice! What’s the easiest way to install this all? I’m a bit lost :-S
OK this code seems to be correct.
variables:
circle_input: "[[[ return states['sensor.wohnzimmer_luftbefeuchter_fuellstand'].state; ]]]"
But it only works when I apply the light template. Without I only get NaN. This was for testing purpose.
Why does it work with light, but without not?
hello everyone, it’s been some time since I can’t solve this problem. I also did a new configuration but I think the problem is in the ui-lovelace.yaml file if I delete the whole dashboard and leave only the sidebar everything looks correct
thanks in advance 
Okay, I can have a quick look. Can you post your full ui-lovelace.yaml here?
Between backticks of course
```yaml
```
That looks correct at least
If you have the same screen resolution as me, then maybe you have a smaller screen?
What browser are you using? I think there’s “Web Zoom and Scaling” in fullykiosk
Have you tried playing around with mediaquery at the beginning of ui-lovelace? You can set the breakpoints in px
I only use circle for percent values. For temp/time I created new climate/person
Sure thanks
button_card_templates: !include button_card_templates.yaml
kiosk_mode:
hide_header: true
views:
- 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 ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". vardagsrum sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar vardagsrum sovrum ."
"sidebar studio övrigt ."
"sidebar media hemma ."
"sidebar footer footer ."
"sidebar . . ."
cards:
- type: custom:button-card #extra_styles fix
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar_template
- type: conditional
conditions:
- entity: input_boolean.laundry_display
state: 'on'
card:
type: custom:button-card
entity: timer.laundry
template: laundry
- type: grid
cards:
- type: button
icon: mdi:information-outline
tap_action:
!include popup/sidebar_information.yaml
hold_action:
action: none
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action:
!include popup/sidebar_update.yaml
hold_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.hacs
#################################################
# #
# Home #
# #
#################################################
- type: grid
title: Home
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entities:
entity: weather.casa
template:
- weather
- type: custom:button-card
entities:
entity: sensor.termometro_esterno_temperature_2
name: TH Esterno
hold_action:
none
custom_fields:
circle: >
[[[ if (entity.state >= '17.5') {
const volume = states['sensor.termometro_esterno_temperature_2'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state <= '17.4') {
const volume = states['sensor.termometro_esterno_temperature_2'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
]]]
humidity: >
[[[ return states['sensor.termometro_esterno_humidity'].state + '%';]]]
template:
- base
- thsensor
- type: custom:button-card
entities:
entity: sensor.th_xiaomi_temperatura
name: TH Soggiorno
custom_fields:
circle: >
[[[ if (entity.state >= '17.5') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state <= '17.4') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
]]]
humidity: >
[[[ return states['sensor.termometro_xiaomi_humidity'].state + '%';]]]
template:
- base
- thsensor
- type: custom:button-card
entities:
entity: sensor.582d343a97b4_temperature
name: TH Bagno
custom_fields:
circle: >
[[[ if (entity.state >= '17.5') {
const volume = states['sensor.582d343a97b4_temperature'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state <= '17.4') {
const volume = states['sensor.582d343a97b4_temperature'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
]]]
humidity: >
[[[ return states['sensor.582d343a97b4_humidity'].state + '%';]]]
template:
- base
- thsensor
#################################################
# #
# LUCI #
# #
#################################################
- type: grid
title: Luci
view_layout:
grid-area: studio
columns: 1
cards:
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-container {
padding: 0px 0px 20px 0px !important;
}
card:
type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
# effect: coverflow
# speed: 650
spaceBetween: 20
threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: group.light #hue_group
name: Luce Tavolo
template:
- light
- icon_spot
- type: custom:button-card
entity: light.luce_cucina
name: Luce Cucina
template:
- light
- icon_spot
- type: custom:button-card
entity: light.piantana
name: Piantana
template:
- light
- icon_shade
- type: custom:button-card
entity: light.bulb2
name: Luce Camera
template:
- light
- icon_hue
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.yeelight_stripe
name: Led
template:
- light
- icon_hue
- type: custom:button-card
entity: switch.tasmota_1
name: Scaldasonno
custom_fields:
icon_plug: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 512 512"><style>@keyframes animate{10%, 20%, 100%{transform: rotateZ(0deg);}30%, 50%, 70%{transform: rotateZ(7deg);}90%{transform: rotateZ(3deg);}40%, 60%, 80%{transform: rotateZ(-7deg);}}.animate{animation: animate 1.35s cubic-bezier(0.5, 1, 0.89, 1); animation-fill-mode: both; transform-origin: 70% 80%; animation-delay: 0s;}</style>
<path d="m457 0h-402c-30.327 0-55 24.673-55 55v402c0 30.327 24.673 55 55 55h402c30.327 0 55-24.673 55-55v-402c0-30.327-24.673-55-55-55zm25 457c0 13.785-11.215 25-25 25h-402c-13.785 0-25-11.215-25-25v-402c0-13.785 11.215-25 25-25h402c13.785 0 25 11.215 25 25z"/><path d="m256 60c-108.075 0-196 87.925-196 196s87.925 196 196 196 196-87.925 196-196-87.925-196-196-196zm0 362c-91.533 0-166-74.467-166-166s74.467-166 166-166 166 74.467 166 166-74.467 166-166 166z"/><path d="m336 211c-24.813 0-45 20.187-45 45s20.187 45 45 45 45-20.187 45-45-20.187-45-45-45zm0 60c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"/><path d="m176 211c-24.813 0-45 20.187-45 45s20.187 45 45 45 45-20.187 45-45-20.187-45-45-45zm0 60c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"/><circle cx="437" cy="75" r="15"/><circle cx="75" cy="75" r="15"/><circle cx="437" cy="437" r="15"/><circle cx="75" cy="437" r="15"/></g></svg>`; ]]]
styles:
custom_fields:
icon_plug:
[top: 10%, left: 10.1%, width: 2.7vw, position: absolute,
fill: "[[[ return entity.state === 'on' ? '#516d82' : '#9da0a2'; ]]]"]
template: light
#################################################
# #
# SOGGIORNO #
# #
#################################################
- type: grid
title: Soggiorno
view_layout:
grid-area: sovrum
columns: 2
cards:
- type: custom:button-card
entity: light.bulb1 #hue_group
name: Luce TV
template:
- light
- icon_lamp
- type: custom:button-card
entity: media_player.samsung_tv_remote
name: TV
hold_action:
!include popup/tv_samsung_popup.yaml
template:
- base
- icon_tv
- loader
- type: custom:button-card
entity: climate.smarther_thermostat
name: Termostato
hold_action:
!include popup/condizionatore.yaml
show_name: true
custom_fields:
circle: >
[[[ if (entity.state === 'heat') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'cool') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#575859" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'dry') {
const volume = states['sensor.th_xiaomi_umidita'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#09f903"/>
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">%</tspan></text></svg>`; }
if (entity.state === 'fan_only') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#575859" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'off') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none"/>
<text x="50%" y="54%" fill="#b2b2b2" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }]]]
state_display: >
[[[ if (entity.state === 'heat') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Caldo fino a ${state}</text></svg>`; }
if (entity.state === 'cool') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Freddo fino a ${state}</text></svg>`; }]]]
template:
- base
- climate
- type: custom:button-card
entity: climate.condizionatore_samsung
name: AC
hold_action:
!include popup/condizionatore.yaml
show_name: true
custom_fields:
circle: >
[[[ if (entity.state === 'heat') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'cool') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#575859" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'dry') {
const volume = states['sensor.th_xiaomi_umidita'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#3B863D"/>
<text x="50%" y="54%" fill="#fcfcfc" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">%</tspan></text></svg>`; }
if (entity.state === 'fan_only') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#fcfcfc" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'off') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none"/>
<text x="50%" y="54%" fill="#b2b2b2" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }]]]
state_display: >
[[[ if (entity.state === 'heat') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Caldo fino a ${state}</text></svg>`; }
if (entity.state === 'cool') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Freddo fino a ${state}</text></svg>`; }]]]
template:
- base
- climate
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
# effect: coverflow
# speed: 650
spaceBetween: 20
threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.conditional_media
state: tv
card:
type: custom:button-card
entity: media_player.samsung_tv_remote
tap_action:
action: none
template:
- conditional_media
- type: conditional
conditions:
- entity: input_select.conditional_media
state: Spotify
card:
type: custom:button-card
entity: media_player.spotify_andrea_guidi
template:
- conditional_media
- type: grid
columns: 2
cards:
- type: custom:button-card
name: Tv
entity: media_player.samsung_tv_remote
template:
- media
- icon_tv
- type: custom:button-card
entity: media_player.spotify_andrea_guidi
name: Spotify
template:
- media
- icon_spotify
- type: custom:button-card
entity: media_player.echo_dot_di_andrea
name: Alexa
template:
- base
- hifi
#################################################
# #
# SENSORI #
# #
#################################################
- type: grid
title: Sensori
view_layout:
grid-area: övrigt
columns: 2
cards:
- type: custom:button-card
entity: binary_sensor.0x158d00047bbd47_moisture #hue_group
name: Allarme
template:
- light
- icon_bathroom
- type: custom:button-card
entity: binary_sensor.sensore_porta_contact
name: Porta
template:
- base
- icon_closet
- lock
- type: "custom:button-card"
entity: sensor.garbage_today
aspect_ratio: 1/1
show_entity_picture: true
show_name: true
name: Rifiuti
show_icon: true
style:
- padding: 0px
styles:
entity_picture:
- width: 80%
- height: 100%
- padding-bottom: 0%
card:
- border-radius: 10%
- background-color: '#848484'
state:
- value: 'organico'
name: Organico
entity_picture: "/local/garbage image/organico.png"
styles:
card:
- background-color: '#3B863D'
- value: 'carta'
name: Carta
entity_picture: "/local/garbage image/carta.png"
styles:
card:
- background-color: '#00B1EB'
- value: 'plastica'
name: Plastica
entity_picture: "/local/garbage image/plastica.png"
styles:
card:
- background-color: '#F4A029'
- value: 'indifferenziato'
name: Indifferenziato
entity_picture: "/local/garbage image/indifferenziato.png"
styles:
card:
- background-color: '#848484'
- value: 'vetro'
name: Vetro
entity_picture: "/local/garbage image/vetro.png"
styles:
card:
- background-color: '#848484'
#################################################
# #
# CASA #
# #
#################################################
- type: grid
title: Casa
view_layout:
grid-area: hemma
columns: 1
cards:
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-container {
padding: 0px 0px 20px 0px !important;
}
card:
type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
# effect: coverflow
# speed: 650
spaceBetween: 20
threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: person.andrea
name: Andrea
tap_action:
!include popup/person_andrea_popup.yaml
hold_action:
action: none
template: person
- type: custom:button-card
entity: person.adele
name: Adele
tap_action:
!include popup/person_adele_popup.yaml
hold_action:
action: none
template: person
- type: custom:button-card
entity: script.turn_off
name: Spegni tutto
hold_action:
action: none
template:
- base
- icon_away
- type: custom:button-card
entity: script.home_arrive
name: Antifurto
hold_action:
action: none
template:
- base
- icon_home
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: camera.cam1
name: cam 1
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_1
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam1
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
- type: custom:button-card
entity: camera.cam2
name: cam 2
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_2
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam2
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
- type: custom:button-card
entity: camera.cam3
name: cam 3
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_3
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam3
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
- type: custom:button-card
entity: camera.cam4
name: cam 4
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_4
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam4
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
Okay, you’ve made a lot of changes so it’s super hard to compare. I tried your ui-lovelace and, after removing the templates that I don’t have, I can’t see the issues you’ve circled.
So it’s probably not related but you’ve made config mistakes on lines:
106, 112, 116, 137, 160, 194, 558
Hello and thanks for all your amazing work !
I have a problem regarding closing button in all my popup : it’s not vertically centered. I found the css line in blue causing this. When disabled on Chrome it’s fine but I didn’t manage to correct it in my theme.
Can you help me please ?
You pointed me to the right track! It was in the Web Zoom and Scaling of Fully Kiosk Browser. I had to disable the View in Desktop Mode option.
Thanks!
