The issue of empty popups is only happening with button cards on it.
So instead of a button card using a custom button card, makes those popup cards work again.
1 Like
So instead of a button card using a custom button card,
ufffā¦does button card still exists in HA ? (just kiddingā¦)
i didnāt use it from the moment when i found custom button card. Markdown card is also on my ānot used anymoreā list from that moment. In fact, i just went through my dashboards recently and found out that appr.70% of my cards are ācustom:button-cardā. Itās waaay most versatile and usefull card in HA. Light years ahead. Thereās really not much you canāt do without it, it just takes some browsing sometimes to find a solution.
Thatās why itās very sad that itās not developed anymore. I really hope that author will reappear, or someone else will continue his (hers?) work if he doesnāt.
I dont know if i am doing something wrong but i have conditional card that shows what is playing on my fire tv stick.
I also have a firemote card that i am want to popup if i click on the image of the firet tv.
However it doesnt do anything when i click ā¦ below is my code can anyone take a look and advise if i am doing something wrong, because i am lost now and cant see the wood for the trees.
type: conditional
conditions:
- entity: media_player.whole_house_fire_tv
state_not: unavailable
- entity: media_player.whole_house_fire_tv
state_not: paused
card:
type: custom:vertical-stack-in-card
cards:
- type: picture-entity
entity: media_player.whole_house_fire_tv
camera_image: camera.whole_house_fire_tv_image
show_state: false
show_name: false
camera_view: auto
theme: Mushroom
hold_action:
action: none
tap_action:
action: fire-dom-event
browser_mod:
title: Fire Remote
icon: mdi:remote
service: browser_mod.popup
data:
size: normal
title: Where is John?
style: |-
--popup-min-width: 500px; --popup-max-width: 670px;
--popup-border-radius: 0 !important;
--popup-background-color: #B33B00;
--popup-border-width: 0 !important;
content:
type: custom:firemote-card
entity: media_player.whole_house_fire_tv
device_type: fire_tv_stick_4k_max
compatibility_mode: strong
app_launch_1: prime-video
app_launch_2: netflix
app_launch_3: disney-plus
app_launch_4: spotify
app_launch_5: ''
scale: '66'
button_overrides:
tv-button:
script: start_tivimate
mute-button:
script: cinema_mode_mute
volume-down-button:
script: cinema_mode_volume_down
volume-up-button:
script: cinema_mode_volume_up_2
power-button:
script: remote_power
style: >
ha-card { margin-top: auto; margin-left: 0px; margin-right: 0px;
margin-bottom: 21px; box-shadow: 0px 0px 58px 6px rgba(255, 255,
255,2.96) !important;
Thanks in advance
Hi. Recently I have updated HA to newest version. I actually did few updates. I am not sure after which one I started have problem with popups. When popup has buttons on bottom it looks like some space is cut between buttons and bottom edge and scroll bar is visible.
How to remove this scroll bar?
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
entity: switch.horizon_socket
primary: >-
{{ 'Are you wish to switch off Horizon Socket?' if
is_state(entity, 'on') else 'Are you wish to switch on
Horizon Socket?' }}
secondary: >-
{{ 'THIS CAN DAMAGE DATA.' if is_state(entity, 'on') else
' ' }}
icon: >-
{{ 'mdi:alert' if is_state(entity, 'on') else
'mdi:comment-question' }}
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''yellow'' }}'
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('switch.horizon_socket', 'on') %}
--icon-animation: pulse 1s linear infinite;
{% endif %}
}
.: |
ha-card {
--ha-card-border-width: 0px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
card_mod:
style: |
.content {
--ha-card-border-width: 0px;
}
ha-dialog {
--vertical-align-dialog: center !important;
}
right_button: 'Yes'
left_button: Cancel
right_button_action:
service: browser_mod.popup
data:
style: |
--popup-max-width: 600px;
--popup-min-width: 400px;
--popup-border-width: 1px;
--popup-border-radius: 12px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
entity: switch.horizon_socket
primary: >-
{{ 'Fine, Horizon Socket will shitch off in 4s.' if
is_state(entity, 'on') else 'Fine, Horizon Socket will
switch on in 4s.' }}
secondary: >-
{{ 'THIS CAN DAMAGE DATA.' if is_state(entity, 'on')
else ' ' }}
icon: >-
{{ 'mdi:alert' if is_state(entity, 'on') else
'mdi:information-outline' }}
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''yellow'' }}'
hold_action:
action: none
tap_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('switch.horizon_socket', 'on') %}
--icon-animation: pulse 1s linear infinite;
{% endif %}
}
.: |
ha-card {
--ha-card-border-width: 0px;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
card_mod:
style: |
.content {
--ha-card-border-width: 0px;
}
ha-dialog {
--vertical-align-dialog: center !important;
}
dismissable: false
title: ''
timeout: 4000
timeout_action:
service: switch.toggle
data:
entity_id: switch.horizon_socket
right_button: Cancel
Has anyone had an issue where all the browser mod entities become āunavailableā?
I am still troubleshooting but thought I would see if anyone else had this.
I am running a Firefox browser on Ubuntu 22.04 lTS (wayland).
I have a suspicion this is occurring when the screen timeout expires but I am not certain yet.
Yep, pretty regularly - it goes offline, comes back, goes offline again, comes backā¦ I wrote a couple of times about it (and others, too), and gave up, since thereās no back information from author why this is happening. Now only thing i use from browser mod is popup - this part (for now) always works.
From 2023.4 HA update some other things doesnāt work, also, like āsidebar orderā, but thereās also nothing said about it, nor update releasedā¦ (maybe author gave up on browser_mod addon ā¦ ?)
I hope @thomasloven is still around and everything is OK. Love their work. Looks like github has wound down recently.
1 Like
Try mine
show_name: true
show_icon: true
type: button
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
entities:
- entity: light.id1
- entity: light.id2
entity: light.id3
This happens with 2023.5.x update. There is a ticket: Scroll bars after update 2023.4 Ā· Issue #574 Ā· thomasloven/hass-browser_mod (github.com)
No solution yet. I find it very strange nobody talks about this, yet browser_mod is one of the most used custom integrations.
if you add to card_mod
.action-button {
margin-bottom: 0px !important;
}
Will fix the problem. Maybe is just temporary fix bit it works now.
2 Likes
Thanks! I might update to 2023.5.3 now with this (I updated and reverted due to this bug and the z-index issue, which somebody else has fixed with theme).
I have 2 buttons that I want in the center and on the bottom of my screen. but it is not workingā¦
- type: custom:mod-card
style: |
hui-horizontal-stack-card$: |
#root {
justify-content: center;
}
card:
type: horizontal-stack
cards:
- type: "custom:button-card" #navigatie terug naar hoofdscherm
template: chip_navigate
variables:
ulm_chip_navigate_path: home
ulm_chip_navigate_icon: mdi:home-outline
- type: custom:button-card
template: chip_navigate
variables:
ulm_chip_navigate_path: verbruikgisteren
ulm_chip_navigate_icon: mdi:flash
ulm_chip_navigate_icon_color: grey
card_mod:
style: |
:host {
position: sticky;
bottom: 5;
}
Has anyone figured out how to disabled the media player in browser_mod 2?
Hi together,
I have multiple scripts e.g. for covers, which display all covers in my house.
popup_window:
alias: popup_window
sequence:
- service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__scrim {
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(50px) !important;
background-color: rgba(0,0,0,0.2) !important;
}
style: >
--popup-max-width: 1000px;
title: Fenster
browser_ID: THIS
content:
type: vertical-stack
cards:
- type: vertical-stack
view_layout:
grid-area: aus
cards:
- type: custom:auto-entities
card:
type: grid
square: false
columns: 3
card_param: cards
filter:
include:
- domain: binary_sensor
entity_id: "*_state"
options:
type: custom:button-card
template: custom_card_door_window
entity: this.entity_id
variables:
ulm_custom_card_entity_name: "{{ area_name('this.entity_id') }}"
ulm_custom_card_entity_battery: binary_sensor.wohnzimmer_rechte_tur_low_battery
sort:
method: entity_id
At the moment, If I click a card which runs the script, the BrowserMod Popup is opened on all devices.
It seems that the ābrowser_ID: THISā isnāt working in a script sequence.
Here is the code for clicking the card:
- type: "custom:button-card"
template:
- "chip_icon_label_state"
#- "chip_navigate_only"
- "chip_blue"
icon: "mdi:window-open-variant"
variables:
ulm_chip_icon_state_entity: sensor.current_windows_open
triggers_update: all
tap_action:
action: fire-dom-event
browser_mod:
service: script.popup_window
data:
browser_id: THIS
Can anyone help?
Thanks
Dominik
Hello, I have the exact same issue. Impossible then to turn on again the media player
First time using popups hereā¦ this gives me an empty popup:
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: custom:button-card
This gives me no popup (no response to tap):
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: popup
card:
type: vertical-stack
cards:
- type: custom:button-card
Any hints as to what I might be doing wrong?
EDIT: I didnāt paste the whole custom button card, as what follows is about 1300 lines. Itās a lot, but itās tested as working on its own.
Add title.
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Test
card:
type: vertical-stack
cards:
- type: custom:button-card
Thank youā¦ I thought that was an optional key.
This gives me an empty popup:
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
title: Test
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: custom:button-card
This results in no popup:
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Test
card:
type: vertical-stack
cards:
- type: custom:button-card
2nd should work (but only with title). Try it without stack etc. first.
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Test
card:
type: entities
state_color: true
show_header_toggle: false
entities:
- entity: sun.sun
Reload your browser window as well.
Thanksā¦ I appreciate the suggestions. Iām not getting anywhere, though. Completely cleared cache with the developer mode/delete cookies method, logged in again, attempted with this andā¦ no popup:
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Test
card:
type: entities
state_color: true
show_header_toggle: false
entities:
- entity: sun.sun
Is it possible that browser mod isnāt playing well with the mushroom card? I only just started playing with those; they look nice, but man are they difficult to customize.
EDIT: Incidentally, this also provides an empty popup:
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
title: Test
service: browser_mod.popup
service_data:
card:
type: entities
state_color: true
show_header_toggle: false
entities:
- entity: sun.sun