🔹 Browser_mod - turn your browser into a controllable device, and a media_player

scstraus · May 3, 2023, 8:45pm

My popup-card has stopped displaying it’s content completely since upgrading from 2023.1 to 2023.4. Anyone know why? I’m on the latest browser mod and do it like below. The card pops up, but the button card it contains no longer appears. I only get a title. I don’t see any changes in syntax on either card, so I can’t imagine why…

  - type: custom:popup-card
    entity: sensor.trash_display
    title: "Trash Needs Taking Out"
    card:
      type: button
      name: I took it out!
      tap_action:
        action: call-service
        service: input_boolean.turn_off
        data:
          entity_id: input_boolean.trash_needs_taking_out
      entity: sensor.trash_display

jouster · May 4, 2023, 9:43am

When I first updated to HA 2023.4, Browser mod got broken…so I wound back to my proxmox backup and all worked again as it was.

I saw there was a Browser mod fix pushed out (2.2.1) which fixed things for 2023.4 and onwards…

So today I went to update HA, but only 2023.5 showing so went to that AND did the Browser Mod update as well…but still, the sidebar and menu bars can no longer be hidden…and even the interface to add/remove/turn on/turn off… don’t seem to work…any changes aren’t reflected and if I try to delete one it still shows in the list…even trying the nuclear option of removing the browser in question altogether doesn’t work either so ill be winding back again for now

Also having the issue again where i cannot slide in the sidebar from the left as I have always been able to do prior to these last few updates…is there something else I need to change to get this working again…

ASNNetworks · May 4, 2023, 12:24pm

It’s explained pretty clear in the ReadMe. You updated from Browser_mod 1.5 to 2.0, which changes basically everything. You need to rework all your popups. There are other broken changes, so make sure to read all updated docs.

jouster · May 4, 2023, 1:00pm

its not the popups. and i came from 2.2 to 2.2.1

popups and everything else still work as expected…its just the headers and sidebars that arent hiding …oh and the sidebar cant be slid in from theft as it could prior to the HASS update

Dont get me wrong, there is every chance that its all the front end but that’s the whole point of this thread and otehrs like it, to let people know there are issues

ASNNetworks · May 4, 2023, 1:06pm

I’m not responding to you, but to @scstraus, he’s having issues with popups content (because he’s not using the new parameters). You can see in my message I targeted him

jouster · May 4, 2023, 1:07pm

so you did, apologies…replied on a phone so everything else was quite small

Nick4 · May 4, 2023, 9:16pm

I have a popup that doesn’t show it’s contents:

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      size: fullscreen
      dismissable: true
      autoclose: false
      title: Config
      content:
        type: button
        tap_action:
          action: navigate
          navigation_path: /config/automation/dashboard
show_state: false
icon: mdi:electric-switch
icon_height: 50px

This one works (I don’t seem to find the reason)

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      dismissable: true
      autoclose: false
      title: Config
      content:
        type: entities
        entities:
          - light.office
show_state: false
icon: mdi:electric-switch
icon_height: 50px

It has worked before but after upgrading from v2023.4.2 to 2023.4.5 I cannot get it to work properly anymore.
Anyone who knows why it is like that and/or see what I’m missing?

Any help is highly appreciated!

Fr3di · May 5, 2023, 9:43am

I have a problem with styling the browser_mod v2.2.1. Trying to make the background transparent but notice I have to change background-color in class

.mdc-dialog .mdc-dialog__surface {
    background-color: var(--mdc-theme-surface,#fff);
}

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    autoclose: true
    size: normal                                    
    data:
       content:
          type: custom:vertical-stack-in-card
          style:
            .: >
              ha-card {
                --ha-card-background: #00000073;
                --mdc-theme-surface: transparent;
              }
           cards:
           ...

which is inside #shadow-root div as on photo.

Can’t figure that out and changing variables in the theme doesn’t work as well.

Can anyone help me with this?

Fr3di · May 5, 2023, 10:13am

Ok answering my own question as maybe will help someone.
I was trying to overcomplicate it when it was enough to carefully read the documentation to the end and add card_mod to style the popup.
So after small changes the transparent background works well.

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    autoclose: true
    size: normal                                    
    data:
       card_mod:
         style:
           ha-dialog$: |
             div.mdc-dialog div.mdc-dialog__surface {
                background-color: transparent;
             }
       content:
          type: custom:vertical-stack-in-card
          style:
            .: >
              ha-card {
                --ha-card-background: #00000073;
              }
           cards:
           ...

Fr3di · May 6, 2023, 10:01am

@thomasloven is it possible to use the dashboard view theme to style the popups? I have a theme specified for my dashboard view but when I try to put the colors variables there (i.e. ha-card-background, popup-background-color), it doesn’t work. It only works when I have those values in the global user HA theme which affects all the popup windows in HA. Styling every single browser_mod.popup call with card_mod is a bit of a pain

ASNNetworks · May 6, 2023, 11:08am

Just create a new yaml called popup_cardmod_style.yaml (or whatever you want) and then use it as an !include in your browser_mod card_mod

Create the .yaml file and paste there your card_mod style, in your case:

         style:
           ha-dialog$: |
             div.mdc-dialog div.mdc-dialog__surface {
                background-color: transparent;
             }

Save the file, then use in your browser_mod code for card_mod (make sure to use your actual path/filename):

So like on your code:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    autoclose: true
    size: normal                                    
    data:
       card_mod: !include /config/popup_cardmod_style.yaml
       content:
          type: custom:vertical-stack-in-card
          style:
            .: >
              ha-card {
                --ha-card-background: #00000073;
              }
           cards:
           ...

I do this for the longest time for many UI elements and also allows me to change the style from one file, which updates then all popups that use that code. If you want different styles, just create separate yamls and include the one you want with the style

Fr3di · May 6, 2023, 11:25am

That’s a great idea @ASNNetworks. Thx, will give it a go

Oh just realised it works only when the dashboard is a yaml file but mine unfortunately is not at the moment Fortunatelly migration seems not to be difficult

Fr3di · May 6, 2023, 2:30pm

Thx again @ASNNetworks it works fine but now have an issue with the standard more-info card just for one dashboard. How can I apply the same style to those popups? Do I need to set popup-background-color or mdc-theme-surface somewhere?

ASNNetworks · May 6, 2023, 2:34pm

The standard more-info dialogs have nothing to do with brower_mod popups, so you can’t style those those this way.

For those you need to use card_mod inside your theme.yaml. When the dashboard uses that specific theme, it will apply the more-info dialog theme to the standard more info dialogs.

This thread is specifically made for that: 🔹 Card-mod - Super-charge your themes! - #1410 by boheme61

There are lots of examples there to get the correct code to achieve what you want for the normal more-info dialog mods.

As far as I know, this is the only proper way to style the default more-info dialogs.

Fr3di · May 6, 2023, 2:40pm

Ok great, will play with that and hopefully get that to work. Thx for help

Ryan_Grandy · May 9, 2023, 3:10am

I am creating a pop_up screen for my dashboard and I use the “size: wide” option. This all works great on the desktop however on my mobile it makes me scroll left and right to see my whole content. When the “size: normal” is used, on the mobile it resizes so it doesn’t scroll left and right but then its small on the desktop.

Is there something I’m doing wrong, does anyone else see this?

I use the following code:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: "HVAC Additional Data"
      size: wide
      content:
        type: vertical-stack
        cards:

Image of issue:

Nick4 · May 9, 2023, 11:37am

Maybe because the contents contain more pixels then the width of your display?

Ryan_Grandy · May 9, 2023, 7:33pm

Possibly but when I set the “size: normal” in the code it resizes everything on the mobile such that I can’t scroll left and right. However on the desktop the popup is much smaller.

rockhstrongo · May 9, 2023, 8:25pm

I’ve noticed that “type: button” cards aren’t working right when I put them inside popups.

I would guess that changing the type from “button” to “entities” is why your second example works, but the first one doesn’t.

scstraus · May 10, 2023, 9:54pm

Actually I had v2.0 working fine for some time before this issue appeared. As far as I can tell, my syntax is perfect. It seems to be related to an issue that about 20 other people have been experiencing in the last month which makes it so that browser_mod is not able to render buttons on popups.