Thanks a LOT Darryn for your efforts! ![]()
Browser Mod 2.7.1 released ![]()
Browser Mod 2.7.1 released.
This release address adds a configurable cameras resolution as a Frontend setting, as well as fixing up Frontend settings tables not showing for some users in some circumstances. The ultimate fix here being to stop using ha-data-table and its underlyng vritualizer which was problematic when used in expanders. You will now see a slight pause on opening Frontend settings expanders as the final table render is delayed until expander is opened.
Is there any known reason why browser mod popups wouldnāt be working in 2026.2.0bx? My beta instance is almost identical to my prod instance and using the same script it works in 2026.1.x but not even a blink or an error in 2026.2.0bx.
All working fine for me ith 2026.2.0b2. Perhaps Browser ID? What does your script look like?
No browser id used, still havenāt figured that out quite yet. This is the script that I first noticed with, but I have others that also are not working. Weird thing is that the traces shows everything as having gone off successfully, just no actual popup. This is called via a tap action from the UI on a badge.
script:
popup_weather_multi_alerts_info:
sequence:
- variables:
grey_colour: *grey_colour
yellow_colour: *yellow_colour
orange_colour: *orange_colour
red_colour: *red_colour
- action: browser_mod.popup
data:
dismissable: true
initial_style: wide
popup_styles:
- style: centered
include_styles:
- wide
styles: |
ha-dialog {
--vertical-align-dialog: center !important;
}
content:
type: markdown
content: |
# {{ states('sensor.environment_canada_multi_alerts') }}
{% if states('sensor.active_weather_alerts') in ['0', 'unavailable', 'unknown'] %}
{{ state_attr('sensor.environment_canada_multi_alerts', 'sections') }}
{% else %}
{% for section in state_attr('sensor.environment_canada_multi_alerts', 'sections') %}
{% set colour_code = red_colour if section is search('<h2.*?>red', true) else
orange_colour if section is search('<h2.*?>orange', true) else
yellow_colour if section is search('<h2.*?>yellow', true) else
grey_colour %}
{{ section
|regex_replace('<strong>(In effect for:)<\/strong>',
'<span>\\1</span>')
|regex_replace('(<strong>)(.*?)(<\/strong>)',
'\\1<font color='~colour_code~'>\\2</font>\\3')
|regex_replace('(<h2.*?">)(.*?)(<\/h2>)',
'\\1<font color='~colour_code~'>\\2</font>\\3') }}
{{ '<hr/>' if not loop.last }}
{% endfor %}
{% endif %}
text_only: true
card_mod:
style:
ha-markdown $: |
span {
font-weight: bold;
}
p {
font-size: 1.2em;
}
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
backdrop-filter: blur(5px);
}
div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: rgba(0, 0, 0, 0.6);
border-style: solid;
border-color: rgba(255, 255, 255, 0.1);
border-width: 1px;
}
And yes I know I have to fix the last card mod style.
The ā#ā here will be treated as a literal string, and not commenting out this line like you may expect. If you wish to comment this out in the template use Jinja coments {# #}.
LOL, itās a markdown heading ![]()
Of course.
My bad. I was looking for what might be different.
No idea why any difference.
Chcecked your script and it runs fine for me with 2026.2.0b2. Of course I get no content but the template is spitting out āunknownā as the header and āNoneā as text. All styling working as expected.
Perhaps to check out where it might be failing, start with a fresh reload of Browser, run script, and check whether <browser-mod-popup> shows under <home-assistant> shadowRoot.
Next you can set in console window.browser_mod_log = true to log Browser Mod activity to see whether the call comes through from backend. Should be like below for your scriptā¦
09:32:34 Command:
{command: 'popup', dismissable: true, initial_style: 'wide', popup_styles: Array(1),
...
Just did a quicky of those and got no <browser-mod-popup> under the <home-assistant> shadowRoot and then no output from window.browser_mod_log = true in console. Iām out of time now but will try again later.
Just to be sure I start this off right what exactly do you mean by āa fresh reload of Browserā? Iāll update when I have time.
Just load page so no dialogs have been loaded as Home Assistant dialog manager (which popups use) will keep dialog elements to be reused. That way you can tell if the dialog has been created but not shown for some reason.
Browser Mod 2.7.2-beta.1 ![]()
Browser Mod 2.7.2-beta.1 is available and most noteable fixes an issue with Home Assistant 2026.2.0(b3) where popup dialog surface will be transparent.
2.7.2 will be released tomorrow in line with Home Assistant 2026.2.0
- Fix transparent dialog surface with Home Assistant 2026.2.0
- Update mobile dialog size to be 100vw minus safe areas
- Update dialog width for viewport between 560 to 600
You know, Iāve done this dozens of times yet 1 in 3 bites me in the ass. I donāt know why but whenever I create a second instance of HA and restore from a backup that new instance assigns a different browser id despite it being the same browser, this is a good thing. But it does mean that I have to remember to register the dam browser before Browser Mod will work.
Sorry for wasting your time on a brain fart, all is working good now.
Browser Mod 2.7.2 Released ![]()
Browser Mod 2.7.2 Released. Importantly, 2.7.2 fixes an issue with Home Assistant 2026.2.0 where popups would have a transparent dialog surface.
Updated just now! ![]()
Hi everyone, I have just updated Core to 2026.2 and Browser mod to latest, the changes on browser mod popup, even if now browser mod is much more powerful, are so annoyingā¦
does it means that on custom size popups I have to check all my popupā styles? I have about 10 popups on tablet, that did work also on mobile pretty well. Now they are badly sized and formatted⦠![]()
Iāve checked the new documentation, I canāt find a step-by-step guide to convert my previous popup style, can someone please explain, do I have to stop using card-mod?
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
hide_header: true
card_mod:
style: |
ha-dialog {
--mdc-dialog-min-width: 70vW !important;
--mdc-dialog-max-width: 90vw !important;
--mdc-dialog-min-height: auto !important;
--mdc-dialog-max-height: 90vh !important;
padding: 0 !important;
margin: 0 !important;
}
.content {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
ha-card {
box-shadow: none !important;
border: none !important;
height: 100% !important;
}
@media (max-width: 768px) {
ha-dialog {
--mdc-dialog-min-width: 95vw !important;
--mdc-dialog-min-height: auto !important;
}
}
EDIT: clear cache at the moment fixed the appearance
There sholud be no need for changes. What version did you updgrade from before now? What specifically is not working as expected - perhaps a screenshot pointing out what is not working as expected.
For some time, I have the problem on iPad, that after each HA restart, the media queries on Companion app are not taken into account anymore. I have to clear companion cache and then it is working again
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
allow_nested_more_info: true
title: Licht
style: |
ha-dialog {
--vertical-align-dialog: center;
--dialog-surface-margin-top: 0px;
scrollbar-color: #2e2e2e transparent;
scrollbar-width: 1px;
}
@media (min-width: 812px) {
ha-dialog {
--popup-min-width: 90vw;
--popup-max-width: 90vw;
}
}
@media (min-width: 1400px) {
ha-dialog {
--popup-min-width: 75vw;
--popup-max-width: 1500px;
}
}
ha-dialog > ha-dialog-header {
margin-bottom: -20px !important;
}
HA 2026.1, newest stable browsermod, but same problem with versions from HA and browsermod before.
Known issue or some change, I didnāt adjusted yet?
No idea on this one. Not sure how caching can affect media queries.
To confirm, no known issues known and no changes I can think of that would affect media queries. They should just work.
Same. Donāt understand it at all. Both in the example are not taken into account then and the normal width is displayed instead. Perhaps it is not the query, but that variable is not set or used after reboot of HA. Cannot check in ipad companion as would do on desktop. I will test some more things.