That was for card-mod, browser_mod has seen no activity yet.
Hi there! I have spent the past hours trying to animate my popup cards. I dont want them just to appear in the middle of the screen, but rather fill screen, slide in from the right and stop at about 20% from the left. I got it working quite easily using css animationsā¦ BUT. There is something wierd about the popup card. First I thought it was the animations, but now I can see the issue even with the most basic example. It ALWAYS work the first time I summon the popup. Then I close it, and summon it again, then there is a quick āflickerā in the middle of the screen. It is there even without animations, and it looks way worse with the animation enabled, because then the center of the screen is empty, and the popup card appears and disappears for like 0.1 second before it slides in as it should. I disabled the animations and it is the same.
Has anyone seen this? Is there a way to solve it? Here is the code I use, a most basic example. You have to tap the button a few times before it start acting wierd.
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: 'My title '
card_mod:
style:
ha-dialog$: >
div.mdc-dialog__surface {
animation: slide-in 2.3s forwards;
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
Upsā¦ indeedā¦ my bad, sorryā¦
Itās hereā¦now for real! (browser mod update, i mean).
1 Like
I am new with Browser Mod and try to add a Button to PopUp but doesnāt work
action: browser_mod.popup
data:
browser_id:
- be0f884a9453ba6bf097ad840b66ab2c
right_button: Licht
content:
type: entities
entities:
- light.wiz_rgbw_tunable_4051da
right_button_action:
action: light.turn_on
data:
entity_id: light.wiz_rgbw_tunable_4051da
The PopUp appears but the button does work.
What i am doing wrong?
Edit: Replaced action: light.turn on with service: light.turn_on and it works. So the former service calls are not adapted to action calls in Browser Mod?
Sweet, thanks for the info.
Just to let you know, I gave up on browser-mod and ended up using bubble card pop-up. Works like a charm.
My browser mod is still not working on desktop after the update? When I inspect the page it still says the below.
Uncaught (in promise) TypeError: document.createElement(...).getRoutes is not a function
I checked the file and its using _getRoutes?
I have cleared cache, restarted etc. It works on my phone fine, but not browser?
Hello,
I have 2 questions concerning browser_mod:
- Is it possible to fallback to a default page after x min without activity on a specific device?
- Is it possible to use a separate dashboard for each device ?
Thanks in advance for your help !
Did you clear cache AND scripts? In windows - chrome/edge this is done by pressing F12 (open developer tools) then right-click on refresh icon and select āEmpty cache and hard restartā. Just pressing ctrl+F5 usually doesnāt help, since this only clears cache, but not js files etc.
So I rolled back my install from 2025.1.1 after having some issues with browser_mod and a couple other integrations. I see there is a new update for Browser Mod, Iām still on 2.3.1, however Iām not seeing it on my update list. Do I need to install HA Core 2025.1 for it to appear?? Any thoughts?
Yes to both.
TBH, for the first one I donāt have the solution at hand so youāll have to do some searching on how to determine when a device has no activity for x time.
For the second one: you donāt even need browser_mod for this.
In your profile settings (bottom of the side bar) you can define the default dashboard for that device which is stored in your browser session.
Thanks for your answer.
There are indeed functions call available to know when device become inactive:
I followed this post which seems to be working: Switch back to default dashboard after some time - #4 by Ldc2335
Iāll probably end up to make another one to dim/wake the screen based on movement as well.
Thanks for the second point ! I totally forgot that this was available.
has anyone seen issues with browser_mod not reconnecting to HA after an HA reboot? currently need to manually go and refresh the browser for it to reconnect.
Hello,
Iām trying to use a popup that activates when pressing a button. On my PC/tablet, it works perfectly and displays in three columns. However, on my phone, I want it to display as one column per card because three columns result in awkwardly sized cards. How can I make the popup responsive so it automatically shows three columns on PCs/tablets and one column on phones?
this is the code so far
type: custom:mushroom-entity-card
entity: sensor.brew_door_sensor_battery
grid_options:
columns: 3
rows: 1
primary_info: none
secondary_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
large: true
title: CCTV
size: wide
auto_close: true
timeout: 20000
content:
type: grid
cards:
- entities:
- binary_sensor.brew_door_sensor_opening
- entity: sensor.brew_door_sensor_battery
positions:
icon: "off"
name: "off"
entity_row: true
type: custom:bar-card
- entity: binary_sensor.brew_door_sensor_battery_plus_low
name: Status
- entity: sensor.brew_door_sensor_battery_last_replaced
name: Last Replaced
- entity: sensor.brew_door_sensor_battery_type
name: Type
title: Chalet Door Sensor Battery
grid_options:
rows: auto
columns: 9
type: entities
- entities:
- binary_sensor.brew_door_sensor_opening
- entity: sensor.brew_door_sensor_battery
positions:
icon: "off"
name: "off"
entity_row: true
type: custom:bar-card
- entity: binary_sensor.brew_door_sensor_battery_plus_low
name: Status
- entity: sensor.brew_door_sensor_battery_last_replaced
name: Last Replaced
- entity: sensor.brew_door_sensor_battery_type
name: Type
title: Chalet Door Sensor Battery
type: entities
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
and this is the result:
John, there is an update of BM that seems to fix your issue.
v2.3.3 - Attempt to avoid caching problems after updates
Simple question apparently not with an easy answerā¦ how do I style the title text of a popup? Literally I just want to change the color, but digging through the shadow DOM and so forth defies me. This is the closest that Iāve gotten, though it only styles the button text:
card_mod:
style: |
ha-dialog {
--mdc-theme-primary: red;
--ha-dialog-header-color: red;
}
How can I register a TLC Google TV in browser_mod? My goal is to use the Dashboard Screen Saver app (Google Play) to show a a Home Assistant Dashboard as a screensaver without needing to login.
I am trying to get a browser_mod.more_info to work only on the browser where I clicked. it currently pops up on all browsers in the house. I found browser_id: this and deviceID: this but they donāt do anything. Can somebody help me get this working?
type: entity
show_state: true
show_icon: true
entity: sensor.woonkamer_temperatuur
name: Woonkamer
state_content:
- name
- state
tap_action:
action: perform-action
perform_action: browser_mod.more_info
target: {}
data:
large: false
ignore_popup_card: false
entity: climate.woonkamer_thermostaat_2
deviceID: this
hold_action:
action: more-info
Solved it myself 
type: heading
icon: mdi:sofa
heading_style: subtitle
heading: Begane grond
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.woonkamer_temperatuur
name: Woonkamer
state_content:
- name
- state
tap_action:
action: more-info
entity: climate.woonkamer_thermostaat_2
data:
browser_id: this