Have no problems with button cards in browser_mod popups, but I’m still on old version. Because of other reasons and limitations of the new one, but this is another reason, which I wasn’t aware of before.
A workaround is to use the custom button card.
Completely forgot that existed. Works perfectly in the popup though. Thanks!
On another note - has anyone managed to get cards to centre vertically properly? I’m using the below piece of code inside the style section but it doesn’t respect it at all.
--vertical-align-dialog: center !important;
It’s a known issue, check the repo 
I mitigated via card_mod.
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Wecker
style: |
app-toolbar { display: flex; padding-top: 4px; }
mwc-icon-button { padding-left: 12px; }
mwc-icon-button ha-icon { padding-bottom: 6px; }
.main-title { font-size: 22px; padding-top: 10px; }
card:
type: entities
But caution: I’m still on old browser_mod because of important known reasons. But can be a starting point (or perhaps work 1:1) with new version as well.
1 Like
Thanks. Glad to know it’s already known. A fix should come out soon.
I am using browser_mod for popups on my dashboard. I am trying to figure how to do a media query and return two different sizes. On my mobile, I want it to be fullscreen. On any other device, I want it to be normal size. Right now, on my two dashboards I am currently using two different popups. I would like to consolidate it all into one popup.
mobile popup
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bathroom
size: fullscreen
content:
other device popup
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bathroom
style: |
--popup-min-width: 500px;
--popup-max-width: 750px;
--popup-border-width: none;
--popup-border-color: none;
--popup-border-radius: 30px;
--popup-padding-x: 20px;
--popup-padding-y: 15px;
content:
Any help would be greatly appreciated.
When I use popups from the browser_mod addon, the title of the popup is displayed to me as follows:
Actually, the text should be displayed next to the X and much larger.
But no matter which theme I choose, it doesn’t change anything.
Does anyone have any ideas about this?
Look 3-4 posts above of your post.
1 Like
Hi, all. Can someone help me with my issue? I made pop-up with background effect, but i see that only in preview. Opened pop-up has blank background.
Opened pop-up
Code
type: custom:popup-card
entity: media_player.kabinet_kompiuter
title: []
dismissable: true
card_mod:
style:
.: |
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -24px -24px !important;
}
ha-header-bar {
margin-bottom: 0px;
}
/* Add background effect */
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.desktoppc', ['idle', 'off', 'paused', 'unavailable']) %}
background: url( '{{ state_attr('media_player.desktoppc', "entity_picture") }}' ) center no-repeat;
animation: Gradient 20s linear 3;
{% endif %}
filter: blur(100px) saturate(200%);
background-size: 20% 20%;
}
@media (max-width: 600px) {
ha-card:before {
background-size: 60% 60%;
filter: blur(70px) saturate(200%);
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
25% {
background-position: 50% 0%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 50% 100%;
}
100% {
background-position: 0% 50%;
}
}
card:
type: custom:stack-in-card
keep:
box_shadow: true
background: true
border_radius: true
outer_padding: true
margin: true
card_mod:
style:
.: |
ha-card {
box-shadow: none;
padding: 0px 10px 10px 10px !important;
background: none
}
cards:
- type: conditional
conditions:
- entity: media_player.desktoppc
state_not: playing
- entity: media_player.desktoppc
state_not: paused
card:
type: custom:mushroom-template-card
primary: Компьютер
layout: vertical
secondary: |-
{% if is_state('sensor.desktoppc_sessionstate','Unlocked')%}
Разблокирован
{% elif is_state('sensor.desktoppc_sessionstate','Locked')%}
Заблокирован
{% else %}
Недоступен
{% endif %}
icon: hue:room-computer
icon_color: >-
{% if is_state('lock.door_lock_2','locked') and
is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off')
%}
green
{% else %}
red
{% endif%}
badge_icon: >-
{% set battery_level =
(states('sensor.front_door_sensor_battery_level') | int / 10) |
round(0) | int * 10 %} {% if battery_level == 100 %} mdi:battery {%
elif battery_level > 0 %} mdi:battery-{{ battery_level }} {% else %}
mdi:battery-alert-variant-outline {% endif %}
badge_color: >-
{% set battery_level =
states('sensor.front_door_sensor_battery_level') | int %} {% if
battery_level > 90 %} green {% elif battery_level > 60 %} light-green
{% elif battery_level > 50 %} lime {% elif battery_level > 40 %}
yellow {% elif battery_level > 30 %} amber {% elif battery_level > 20
%} orange {% elif battery_level > 10 %} deep-orange {% else %} red {%
endif %}
tap_action:
action: none
card_mod:
style:
.: |
mushroom-state-info:before {
content: "Кабинет";
font-size: 16px;
font-weight: light;
}
ha-card {
background: none;
height: 241px !important;
padding-bottom: 65px !important;
box-shadow: none;
--card-primary-font-size: 24px;
--card-secondary-font-size: 16px;
--card-secondary-font-weight: LIGHT;
--card-primary-font-weight: LIGHT;
--badge-icon-size: 1.1em;
--badge-size: 1.4em;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
:host {
--mush-icon-size: 84px;
}
- type: conditional
conditions:
- entity: media_player.desktoppc
state_not: unavailable
- entity: media_player.desktoppc
state_not: idle
card:
type: custom:stack-in-card
keep:
border_radius: true
card_mod:
style:
.: |
ha-card {
box-shadow: none;
background: none;
padding: 5px 10px 10px 10px !important;
margin: -40px -24px 0px -24px !important;
}
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.desktoppc
icon_type: none
layout: vertical
name: Компьютер
show_volume_level: true
card_mod:
style:
.: |
mushroom-state-info:before {
content: "Кабинет";
font-size: 16px;
font-weight: light;
}
ha-card {
--ha-card-box-shadow: none;
--ha-card-background: none;
--ha-card-border-width: 0;
--card-primary-font-size: 24px;
--card-secondary-font-size: 16px;
--card-secondary-font-weight: LIGHT;
--card-primary-font-weight: LIGHT;
--badge-icon-size: 1.1em;
--badge-size: 1.4em;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
:host {
--mush-icon-size: 84px;
}
- type: custom:mushroom-media-player-card
entity: media_player.desktoppc
icon: mdi:music
collapsible_controls: true
show_volume_level: false
use_media_info: true
show_icon: false
media_controls:
- on_off
- shuffle
- previous
- play_pause_stop
- next
- repeat
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal aidi!important;
font-size: 18px;
font-weight: 200;
}
.: |
mushroom-shape-icon {
display: none;
}
ha-card {
--ha-card-border-width: 0;
--control-icon-size: 30px;
background-color: transparent;
margin-top: 0px;
--badge-size: 0;
{% if is_state(config.entity, 'playing') or is_state(config.entity, 'paused') %}
--rgb-state-media-player: var(--album-art-color);
{% else %}
{% endif %}
/* Скрытие названия устройства при неактивности*/
{% if is_state(config.entity, 'off') or is_state(config.entity, 'idle') or is_state(config.entity, 'unavailable') %}
--primary-text-color: rgba(0, 0, 0, 0.0);
--card-secondary-font-size: 0px;
{% else %}
{% endif %}
}
mushroom-state-info:after {
white-space: pre !important;
overflow: visible !important;
text-overflow: ellipsis !important;
{% if is_state(config.entity,'idle') %} content: "Бездействие";
{% elif is_state(config.entity,'off') %} content: "Выключено";
{% elif is_state(config.entity,'unavailable') %} content: "Недоступно";
{% endif %}
font-size: 12px;
font-weight: bold;
color: var(--secondary-text-color);
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') and not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
width: 20rem;
align-self: center;
margin: 0px 0px 25px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0));
border-radius: 12px;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
mushroom-state-item {
text-align: center;
margin-left: -10px;
}
.actions {
/* Move volume button to seperate row */
display: block !important;
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
{% if state_attr('media_player.desktoppc', 'media_duration') == 0 or state_attr(config.entity, 'media_duration') == None %}
margin-top: 13px;
{% else %}
margin-top: 37px;
{% endif %}
width: 63%;
align-self: center;
}
mushroom-button {
/* Size volume button to match other controls and center */
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
/* Correct margins for volume button on second row */
display: flex;
margin-right: 0px !important;
/* Check if PLAY|STOP are supported and adjust margin accordingly */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
margin-bottom: var(--spacing) !important;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.desktoppc
state_not: 'off'
- entity: media_player.desktoppc
state_not: idle
card:
entity: media_player.desktoppc
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if state_attr('media_player.desktoppc', 'media_duration') == 0 %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.0) !important;
{% else %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
width: 59.5%;
align-self: center;
margin: -90px auto auto;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
background-color: transparent !important;
}
card_mod:
style: |
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
background-color: transparent;
border: none !important;
box-shadow: none;
margin: 10px 0px 0px 0px !important;
}
@media (min-width: 1200px) {
ha-card {
margin: 10px 0px 0px 0px !important;
}
}
:host {
margin: 0px !important;
--album-art-color:
{% if not is_state('media_player.desktoppc', 'idle') and not is_state('media_player.desktoppc', 'off') %}
{{ states('sensor.muted_color_desktoppc') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
- type: custom:mushroom-media-player-card
entity: media_player.desktoppc
layout: vertical
fill_container: true
show_volume_level: false
use_media_info: false
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls: []
icon_type: none
secondary_info: none
primary_info: none
card_mod:
style:
.: |
ha-card {
margin: -24px 0px 0px 0px;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
/* Move volume button to seperate row */
display: block !important;
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
margin-top: 0px;
width: 63%;
align-self: center;
}
:host {
margin: 0px !important;
--album-art-color:
{% if not is_state('media_player.desktoppc', 'idle') and not is_state('media_player.desktoppc', 'off') %}
{{ states('sensor.muted_color_desktoppc') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
- type: grid
square: false
columns: 1
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: button.desktoppc_lock
secondary: Блокировка
icon: mdi:lock-outline
icon_color: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: !important;
.: |
ha-card {
--icon-border-radius: 12px;
}
- type: custom:mushroom-template-card
entity: button.desktoppc_shutdown
secondary: Выключить
icon: mdi:power
icon_color: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: !important;
.: |
ha-card {
--icon-border-radius: 12px;
}
- type: custom:mushroom-template-card
entity: button.desktoppc_sleep
secondary: Сон
icon: mdi:sleep
icon_color: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: !important;
.: |
ha-card {
--icon-border-radius: 12px;
}
- type: custom:mushroom-template-card
entity: button.desktoppc_restart
secondary: Перезагрузка
icon: mdi:reload
icon_color: null
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: !important;
.: |
ha-card {
--icon-border-radius: 12px;
}
- type: custom:mushroom-light-card
entity: light.desktop_light
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
name: Подсветка
double_tap_action:
action: url
url_path: http://localhost:8090
icon: mdi:television-ambient-light
card_mod:
style: |
mushroom-state-info:before {
content: "Кабинет";
font-size: 12px;
font-weight: bold;
}
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
1 Like
Hello,
Anyone know why this popup shows an static value? How I can made it refreshed automatically?
I also tested with Mushroom Template Card with exactly the same issue.
I wanted to follow up on this request. I see above in the thread that the way I want the popup to work was the default behavior in v1.x. Essentially full size on my iphone, and as wide or normal on any other device. How would I go about creating this for my own popups. It would be awesome if I could minimize my popups and not have to create a separate one for each device. Thanks again in advance.
Hello, im hoping someone can help me.
I have this room card that i want to put inside a popup, but whenever i try to run the scrip i recive an error saying: could not call service: script/popup_stua Error rendering data template: UndefinedError: ‘config’ is undefined
What am i missing?
My code is:
popup_stua:
alias: Popup - Stua
sequence:
- service: browser_mod.popup
data:
size: normal
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Klikk her for å gå til stua
tap_action:
action: navigate
navigation_path: /lovelace-panel/stua
fill_container: false
layout: vertical
multiline_secondary: false
card_mod:
style: |
:host {
padding-left:0px;
--ha-card-background: #1c1c1c;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: switch.hue_kontakt_stua_1
icon_color: |-
{% if is_state(config.entity, 'on') %}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 1.0em
- type: template
entity: light.over_stuebordet
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 1.0em
- type: template
entity: light.stua_uten_stuebordlys_dz
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 1.0em
- type: template
entity: input_boolean.boolean_filmlys_stua
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:movie-open-outline
{% else %}
mdi:movie-open-off-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 1.0em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 10;
margin-top: -0px;
alignment: justify
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.verisure_rv_stua_temp
primary_info: state
secondary_info: name
name: Temperatur
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.verisure_rv_stua_fukt
primary_info: state
secondary_info: name
name: Fuktighet
icon_color: blue
card_mod:
style: |
ha-card {
float: right;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.verisure_rv_stua_temp
name: Tempratur
color: "#00bb33"
- entity: sensor.verisure_rv_stua_fukt
name: Fuktighet
color: "#2196f3"
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
float: right;
}
- type: custom:mushroom-light-card
entity: light.stua_uten_stuebordlys_dz
icon: mdi:ceiling-light
name: Alle
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
- type: custom:mushroom-light-card
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
icon: mdi:floor-lamp
name: Under trappa
entity: light.under_trappa
- type: custom:mushroom-light-card
entity: light.taklyset_i_spisestua
use_light_color: false
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
icon: hue:lightstrip
name: Spisestua
- type: custom:mushroom-light-card
entity: light.ved_vitrineskapet
show_color_temp_control: true
show_brightness_control: true
show_color_control: true
use_light_color: false
icon: mdi:lamp
name: Vitrineskap
- type: custom:mushroom-light-card
entity: light.over_stuebordet
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
icon: mdi:ceiling-light
name: Stuebordet
- type: custom:mushroom-light-card
entity: light.ved_sofaen
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
icon: mdi:lamp
name: Sofaen
- type: custom:mushroom-light-card
entity: light.ved_tven
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
icon: mdi:lamp
name: Ved TV-en
mode: single
Tap/hold actions aren’t working for me anymore, since upgrading to 2023.7.0.
It doesn’t seem to matter what type it is (“button”, “entities”, “mushroom-template-card”), tapping/holding does nothing.
Anyone else?
2 Likes
You could try the custom button card, those do work with latest HA.
Unfortunately me too.
Same here @rockhstrongo - all my pop-ups are not able to be interacted with. Fingers crossed for a fix or solution.
here it stopped working in the app, but in chrome pc or mobile it is still ok
After checking all my various devices - Interactions with buttons seem to retain their functionality after upgrading to 2023.7.0 - However, once the ‘front-end-cahce’ is reset on an your devices, the pop up windows no longer responds to button clicks.
Slider bars (volume sliders or light brightness sliders) retain their functionality and respond to click+drag actions.
I was also able to interact with a map element inside of a popup window. zoom-in/out, drag+drop, etc worked as expected. 
1 Like