I have a 100 points question 
How can I change the background color of the header (that field where the title and the āXā button are) for a full screen popup?
I added image to be more accurate. That red bordered region, from the popup. I tried everything, nothing works. In the end, I want to put it like position absolute and hide the title, letting only the āXā to be shown
You can even add a height, if you want. I used --mdc-dialog-min-height: auto; for some āunusualā looking popups
ha-header-bar $: |
.mdc-top-app-bar {
background: YOUR COLOR VALUE !important;
}
Under the rest of the code of card-mod-more-info-yaml:
I also found out that this centering - for unknown reason - works or notā¦ mostly it works, but it can happen that occasionally on any of my (4) tablets randomly doesnāt and popup again shows at top.
I guess itās the same behaviour as is with browser modās media player and other sensors - they are just too unreliable for use since V2 came out. From browser mod i only use fire-dom-event for popup and thatās it - this works wonderfully.
Yes, I did this before and it is working, but this is affecting all the popups. Can I achieve the same result only for specific popups? A CSS added into the lovelace card yaml which have the popup?
Thank you!
With the help of @ASNNetworks , I added this to my themes.yaml and everything is ok on the computer, phone, 6 similar tablets, and another 2 different tablets.
ios-dark-mode:
card-mod-theme: ios-dark-mode
card-mod-more-info-yaml: |
.: |
ha-dialog {
--vertical-align-dialog: center !important;
}
2-3 tablets had the same issue like you say, but after I clean the fully browser cache, everything was ok.
Oh, one more thing, I needed to restart HA completely, I donāt know why. Restart from SSH with reboot now
Yes, in the browser_mod github link I posted it is explained.
It is very strangeā¦
I want to hide the title with css and make the āXā button as absolute. I done it, it was working, but after I have refreshed the page, nothing works now.
With this was working in the first place:
card_mod:
style:
ha-dialog$: |
.mdc-dialog .mdc-dialog__scrim {
background-color: var(--mdc-dialog-scrim-color, rgba(0, 0, 0, 0.92)) !important;
}
ha-dialog: |
.heading{position:absolute !important}
.content{margin-top:20px !important}
.heading ha-header-bar .main-title{display:none !important}
Then, after I have refreshed the page, the code was changed like this:
card_mod:
style:
ha-dialog$: |
.mdc-dialog .mdc-dialog__scrim {
background-color: var(--mdc-dialog-scrim-color, rgba(0, 0, 0, 0.92)) !important;
}
ha-dialog: >
.heading{position:absolute !important}
.content{margin-top:20px !important}
.heading ha-header-bar .main-title{display:none !important}
And even if I changed the code back, nothing worked. I canāt make the heading as absolute position. Any idea?
Edit: now it is working again, then stops and so on 
I need to delete cache everytime I want to work, If I make another change, everything will be as initial, then again delete browser cache Very strange
Edit2: Now seems that the code does not changes itself after refreshā¦
Edit3: Amazingly strange :)) It is still chaning my code, only that sign, from " | " to " > ", but I think I understand why. Seems to work, but I need to delete cache after I finish any editing. I use Firefox
Thanks again, for help
End: I have removed the title and I moved the āXā button to the middle bottom of the screen, in order to have more room from top, this is the code and the result:
Last Edit: Added a little blink effect as well, in order to see it better
ha-dialog: >
.heading ha-header-bar, .heading{position:absolute
!important;width:0px;height:0px} .heading ha-header-bar
.main-title{display:none !important} .heading ha-header-bar
ha-icon-button{position:fixed;bottom:0;margin-bottom:30px;left:
50%;transform: translateX(-50%);animation: ha-icon-button 1.0s
linear infinite;border-radius:50px;color: #6cbaff;} @keyframes
ha-icon-button {
0% {box-shadow: 0 0 40px #6cbaff8c;}
50% {box-shadow: none;}
100% {box-shadow: 0 0 40px #6cbaff8c;}
}
Thatās what i was talking about. It works, then suddenly it doesnāt, then it works again, and it doesnāt againā¦
itās just too unreliable for daily useā¦
Yes, it is. A good workaround what I achieved it is like this
For me, seems to work good in this way. And BTW, delete browser cache for tablets as well, after editing
Iāve done all that thousand times. Usually after that indeed it does work, but sadly it doesnāt last long (at least for me it doesnātā¦)
If I donāt make changes again to that card, it is ok. But yes, like you saidā¦ If you try to do something else, it will not remain the sameā¦ 
Very unusual
Edit: You are right, now, after time, it is not working anymore for me as well Not even with cleaning cache/cookies
Iām having trouble with the camera and the iPad. When I click on the camera entity in my dashboard, the more info dialog pops up, but the Info tab is empty (no current state, no camera feed). No photo or subtitle appears in the Media view (Cameras folder) either.
I have enabled the camera in the iPad that browser_mod has registered, but still, no feed. The specific preview URL /api/camera_proxy/camera.manuels_ipad?authSig= returns HTTP 500, but there is no error in Home Assistantās info log or debug log.
Everything is its latest version.
What could be wrong?
EDIT: I just tested my Pixel 6 Pro with browser_mod, and that doesnāt work either. I canāt see camera previews or play camera video of my Pixel 6 Pro from the iPad, and the same goes of my iPad from my Pixel 6 Pro. Both are on the same LAN.
So I know itās possible to call multiple services, but can I attach a call service and navigate action to a single tap_action? Iād like to press an input.button AND navigate to the previous lovelace page. Is this possible?
The navigation is also as a service available, shouldnāt that solve this for you ?
Hi here,
I have a problem with browser mod popup, I have a card with popup to activate scene (but tried with wled preset entity and same behaviour) and once button clicked, it send in infinite loop the request to my wled device, made it unavailable because of the number of the request. When I turn off the entity it turn on again with the same scene.
type: custom:mushroom-light-card
entity: light.wled_1
name: Treillis
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
tap_action:
action: toggle
layout: default
secondary_info: state
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Wled
content:
type: grid
square: false
columns: 1
cards:
- type: grid
square: false
columns: 4
cards:
- type: tile
entity: scene.treillis_sunrise
card_mod:
style: |
ha-card > .tile > .info { display: none }
ha-card > .tile { justify-content: center }
icon_tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.treillis_sunrise
- type: tile
entity: scene.treillis_sunrise
card_mod:
style: |
ha-card > .tile > .info { display: none }
ha-card > .tile { justify-content: center }
icon_tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.treillis_sunrise
- type: tile
entity: scene.treillis_sunrise
card_mod:
style: |
ha-card > .tile > .info { display: none }
ha-card > .tile { justify-content: center }
icon_tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.treillis_sunrise
- type: tile
entity: scene.treillis_sunrise
card_mod:
style: |
ha-card > .tile > .info { display: none }
ha-card > .tile { justify-content: center }
icon_tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.treillis_sunrise
- type: custom:light-entity-card
entity: light.wled_1
hide_header: true
child_card: true
persist_features: true
brightness: false
color_picker: false
Full details here : Action in popup sended in infinite loop Ā· Issue #517 Ā· thomasloven/hass-browser_mod Ā· GitHub
I want to configure a button on a pop-up. My code isnāt working - what do I need to change / whatās the right code for the action field of the left or right buttons to call a service?
show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.licht_am_morgen
icon_height: 25px
hold_action:
action: call-service
service: browser_mod.popup
data:
content:
type: custom:time-picker-card
entity: input_datetime.samu_wochentag_aufstehen
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
hour_mode: double
align_controls: center
name: header
thin: true
hide:
seconds: true
name: Licht am Morgen
left_button_action: call-service
service: switch.toggle
target:
entity_id: switch.steckdose_bett
left_button: Ausschalten
target: {}
Anybody else noticed that since the new version, some sensors in Home Assistant are not as reliable? For example I just came downstairs and my tablet didnāt turn on, as is sometimes happening since I upgraded. Today I had time (no kids!) to investigate why, so I looked and Home Assistant was reporting that the ālightā sensor for browser_mod was āonā. Hence why my condition check was failing when assessing whether to turn on the tablet. I flicked the ālightā to āoffā (nothing changed, wasnāt expecting anything to) and then flicked the toggle to āonā. The tablet, as expected, turned on.
This never happened with the previous browser_mod. Anyone else experiencing this?
Thanks!!
I think your indentation may be incorrect, and you could try using data: instead of target
left_button_action: call-service
service: switch.toggle
data:
entity_id: switch.steckdose_bett
Yes, itās a problem many users experience - sensors randomly go offline, come back, go offline againā¦
Since quite some users report this problem itās strange that author is silent in this regardā¦