Congratulations and thanks for your great dedication, I think there are private companies that do not have such good support
1 Like
Is it no longer possible to style the individual cards within the pop-up?
For example if I have a pop-up with a markdown and an entities card in a vertical-stack is it possible to change the font size in, say, just the markdown.
I used to be able to style each card within the popup independently and apply a global style to the whole popup. (Which in this case had the added benefit of being able to use the Java scripting abilities of the button-card and set the font dynamically.)
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: User Interface Font
hide_header: true
card:
type: vertical-stack
cards:
- type: markdown
content: Leave blank to use the font from the current theme.
style: >
ha-card {
box-shadow: none;
padding: 0em 0em 0em 1em;
background: var(--paper-dialog-background-color);
margin: 0em;
}
p {
font-size: 18px;
}
- type: entities
entities:
- entity: input_text.irrigation_ui_font_family
name: Font Name
style: >
ha-card {
box-shadow: none;
border-radius: 0em 0em 1em 1em;
background: var(--paper-dialog-background-color);
}
deviceID:
- this
style:
font-family: >
[[[
return states['input_text.irrigation_ui_font_family'].state
]]]
box-shadow: 0em 0em 0.5em
border-radius: 1em
overflow: hidden
opacity: 0.9
But now I seem to have to move all the styles to apply globally to the popup itself
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: User Interface Font
card:
type: vertical-stack
cards:
- type: markdown
content: Leave blank to use the font from the current theme.
- type: entities
entities:
- entity: input_text.irrigation_ui_font_family
name: Font Name
deviceID:
- this
style:
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 1em;
box-shadow: 0em 0em 0.5em;
}
.: |
:host {
--mdc-theme-surface: var(--paper-dialog-background-color);
--ha-card-background: var(--paper-dialog-background-color);
--secondary-background-color: var(--paper-dialog-background-color);
opacity: 0.9;
}
And styles applied to each card within the popup seem to be ignored.
yes, I am seeing the same, though not consistently, after having updated the last couple version, up to 1.1.3 now. Every reload or so (sorry not being able to be more precise) only red cards are shown for the custom cards.
must clear cache then and do yet another reload to get the cards back
only remotely related error in the inspector (Safari) is
(yes, I know that is for card-mod, simply trying to report whatās happeningā¦)
of course, forgot to mention, this is after updating to HA 113.x
2 Likes
Yes, already created issue on GitHub for thisā¦
So itās not just me. I thought i broke something after some template testing. 
I have no idea what you have tried.
But now I seem to have to move all the styles to apply globally to the popup itself
What makes you think that?
And styles applied to each card within the popup seem to be ignored.
Thereās no styles applied to the card in your example.
Ok, sorry.
A simplified question.
How do I style individual cards within the pop-up?
Before v0.113 and the browser_mod upgrade I used this:
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: User Interface Font
hide_header: true
card:
type: vertical-stack
cards:
- type: markdown
content: Leave blank to use the font from the current theme.
style: >
ha-card {
box-shadow: none;
padding: 0em 0em 0em 1em;
background: var(--paper-dialog-background-color);
margin: 0em;
}
p {
font-size: 18px;
}
- type: entities
entities:
- entity: input_text.irrigation_ui_font_family
name: Font Name
style: >
ha-card {
box-shadow: none;
border-radius: 0em 0em 1em 1em;
background: var(--paper-dialog-background-color);
}
deviceID:
- this
style:
font-family: >
[[[
return states['input_text.irrigation_ui_font_family'].state
]]]
box-shadow: 0em 0em 0.5em
border-radius: 1em
overflow: hidden
opacity: 0.9
but now that returns this.
It seems to be ignoring all the styling
My new config gives me this (picture2):
which is pretty close to what I had previously but I canāt change the font-family or size on each card separately.
This is the new config:
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: User Interface Font
hide_header: true
card:
type: vertical-stack
cards:
- type: markdown
content: Leave blank to use the font from the current theme.
- type: entities
entities:
- entity: input_text.irrigation_ui_font_family
name: Font Name
deviceID:
- this
style:
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 1em;
box-shadow: 0em 0em 0.5em;
}
.: |
:host {
--mdc-theme-surface: var(--paper-dialog-background-color);
--ha-card-background: var(--paper-dialog-background-color);
--secondary-background-color: var(--paper-dialog-background-color);
opacity: 0.9;
}
Iām experimenting with the features of version 2ā¦
I want to create a popup that only appears on the device where I tried to open it. However, no mater what I do, the pop up seems to appear on all of my devices.
Here is a portion of the card containing the relevant sections, if you need more let me know:
type: entities
entities:
- entity: media_player.viziocastdisplay2916_2
name: Second Bedroom Remote
tap_action:
action: call-service
service: browser_mod.command
data_tamplate:
command: popup
deviceID: this
title: Second Bedroom Remote
card:
cards:
- cards:
- entity: script.1586558814969
hold_action:
action: more-info
icon: 'mdi:backburger'
name: Back
show_icon: true
show_name: true
tap_action:
action: toggle
type: button
I will also add the sections from another attempt:
icon: 'mdi:lightbulb-on'
name: Dimmer
show_icon: true
show_name: true
tap_action:
action: toggle
type: button
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
type: vertical-stack
deviceID:
- this
In your first example, you can clearly see that the bottom left and right corners have a radius, so the styles are definitely applied to the cards.
However, the entire dialog has been vastly redesigned in 0.113, and thus some more work is required to get e.g. the background correct.
Also; in 0.112, the markdown card underwent a major redesign, so the style of the p element canāt be applied like that anymore. Youāll need to use the advanced method and go through ha-markdown or whetever itās called IIRC.
Sorry if this has been asked before, but Iām running into this error:
chunk.8b29f0c82629b54e915d.js:25233 Uncaught (in promise) TypeError: Cannot read property 'connection' of undefined
at HTMLElement.value (chunk.8b29f0c82629b54e915d.js:25233)
at l (browser_mod.js:1)
chunk.8b29f0c82629b54e915d.js:25233 Uncaught (in promise) TypeError: Cannot read property 'connection' of undefined
at HTMLElement.value (chunk.8b29f0c82629b54e915d.js:25233)
at l (browser_mod.js:1)
at async v._load_lovelace (browser_mod.js:149)
It stops all other scripts from loading. How do I fix that?
Asked before and under investigation 
, for now, downgrade back to 1.1.1
Change this to the deviceID you want it to show up on. Check out the docs to find out your deviceID.
Miss read your post. Change the data_template line to service_data!
action: call-service
service: browser_mod.command
service_data:
command: popup
deviceID: this
1 Like
this only works in the developer tools, not necessarily everywhereā¦
thatās not an automationā¦
Thank you, it worked when I did that!
1 Like
The Cannot read property 'connection' of undefined problem is hopefully fixed with 1.1.4.
1 Like
confirmed fixed! as always, much appreciated
On HACS 1.2.2, todayās release of browser_mod (1.1.4) and behavior is still as you describe (popup in the top-left corner and closes with back button but not with x button). Same behavior on edge and safari. Havenāt checked card-mode styling yet, to see what new styling options exist (or what were the old ones applied for that matter).
Yes, i can confirm, this happens also to meā¦ popup in the top-left corner and no close with X button.
Use release 29 for Home Assistant 0.112 or earlier.
1 Like