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

[MRobi (Mike)]

I have always had a title assigned.

It looks normal on the desktop

But looks terrible now on mobile through the HA app

None of the mushroom entities in the popup can be toggled on either.
Here’s the code for one of my popups from the dashboard.

    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Garage Lights
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.garage_lights
                name: Garage Lights
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
              - type: custom:mushroom-light-card
                entity: light.outside_lights_garage
                name: Outside Garage Lights
                use_light_color: true
                show_brightness_control: true
                show_color_temp_control: false
                show_color_control: false
                collapsible_controls: true
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                    }
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }
    hold_action:
      action: more-info
    double_tap_action:
      action: toggle

EDIT: Just tried assigning a tap_action to the card inside the popup to toggle the entity and that still does not work.

EDIT 2: I just reloaded the page and now it looks off on desktop too

I could live with the odd looking title. But not being able to toggle any entity breaks my entire dashboard. It’s odd that when a light is on I can adjust brightness or colour using the sliders, I just can’t toggle them in a popup window.

[Mariusthvdb (Marius)]

not fully grasping the issue, but suffering the same thing, cant click out if it. My config is a core:

hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      style: |
        --popup-border-radius: 0px;
        --popup-padding-x: 0px;
        --popup-padding-y: 0px;
        --dialog-backdrop-filter: blur(0.8em) brightness(1.2);
        --dialog-content-padding: 20px;
      content:
        type: markdown

since this is a Markdown, I dont have that title X in the first place? or is that card type independent. Anyways, I can only get out by sliding the full app out of the iOS view and re-open.
If I left slide in another menu item, it still blocks the screen

and its not the styling. If I take that out completely, the popup just looks ugly, but no control to click out either…

[larryo108 (Larry Overn)]

I have the tap action on multiple custom button cards set to pull up a browser mod popup for the room. I am wondering if there is a way to choose a different popup config file based on the device/browser_id I am using. Is that possible?

[AwesomeGuyNamedMatt (Matt)]

I had an issue previously where I could not click on any popups. This was attributed to a change in Mushroom Cards after version 3.x. When I rolled back Mushroom cards to 2.8.x it restored functionality. Then I saw that Browser_Mod had an update and I tried it along with the most recent Mushroom card. I hopped that everything would work. I was wrong. Now there have been too many versions of Mushroom Card and Hacs won’t let me roll back to a 2.8.x version. I can only roll back to 3.0. How should I proceed?

-Edit
Updating to HA version 2023.7.3 and clearing the cache fixed the probleem.

-Edit 2
Android companion apps are not working but HA opened in a browser on Android does work…

[1umnyy (Viktor)]

Hi guys. There was a problem, updated HA to 2023.7.3, and now the pop-up window works on the phone in fullscreen mode. How can I get it back so it’s not so big?

[ASNNetworks]

Wait till it’s fixed.

Popup is stretched to the entire window in the android app home assistant · Issue #606 · thomasloven/hass-browser_mod (github.com)

[1umnyy (Viktor)]

I found a solution, but I can’t figure out where to find this json file.

mobile popup fix for HA 2023.7.3

[ASNNetworks]

Since the changes are all only CSS, would’t it be possible to use card-mod theme variables for temporary workaround?

[1umnyy (Viktor)]

Unfortunately I can’t do it

[Nettuno69]

Hi, I would like to create a tab to switch false or true on the “Hide header” function only for user XXX. How can I do?

[ve1kozz111]

Any updates on the ios pop up bug? It’s been around for 3 weeks and i can’t imagine anyone using browser mod with it in the state it currently is. I see there’s a pull request but i’m not sure how to download/install that pull request using hacs into my HA setup. If someone has any ideas let me know please.

[ve1kozz111]

I’ve fixed this and confirmed it on my own ios 16.6 HA 2023.8.2

Add GitHub - ve1koz111/hass-browser_mod: 🔹 (MOBILE FIX) A Home Assistant integration to turn your browser into a controllable entity and media player as a custom repository.

Uninstall old browser mod ‘ignoring’ entities, and reinstall from this repository until a proper fix is made.

YOU MUST RESET FRONTEND CACHE ON YOUR DEVICE FOR THIS TO WORK.

If rounded corners are not working for you add this to your CSS:

–ha-dialog-border-radius: var(–popup-border-radius, 28px);

[teh_dk (David Kunttu)]

Were you able to figure this out?

[dev0 (Daniel)]

I installed browser_mod primarily for the purpose of hiding the top bar on some of my dashboards. I choose it over other solutions that could do that because it seemed the most useful otherwise. However, it seems like it’s not possible to hide the top bar just for some specific dashboards. Am I missing something or can I in deed only configure browser_mod on a per user and per browser setting?

[Rudd-O]

Only per user and per browser, not per dashboard. For a per dashboard solution you’ll have to write a bit of custom JS or include a custom CSS.

[ibcm123]

Hello!
I’m rather new to homeassistant and also to browser_mod. I’m trying to create a PIN code entry page, to lock some dashboards.
So I created a PIN code button-field and I’d love it to be shown in a popup window.

I created a button with the following tap_action to call the popup:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Gebe deinen PIN ein
    card:
      type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - type: button
              show_icon: true
              icon: mdi:numeric-1-box-outline
              show_name: false
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.add_one_to_password
            - type: button
              show_icon: true
              icon: mdi:numeric-2-box-outline
              show_name: false
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.add_two_to_password
            - type: button
              show_icon: true
              icon: mdi:numeric-3-box-outline
              show_name: false
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.add_three_to_password

this is only the 3 buttons of the first row, because in this way it’s less code to show you.

The problem is, that the popup shows only the title. nothing else, not a single button.
The code works right, when i use it in a dashboard. this is the working PIN code field in a dashboard:

I really hope you can help me, I’m trying for many hours meanwhile

[ibcm123]

this is what i get, when i launch the popup, couldn’t put the second picture to my post because of my new-user-state.

there is no error message, the only thing is, the code buttons are not shown.

[Nick4 (Nick)]

Hi, welcome to the forum!

I already wrote the ‘reason’/solution in this topic: custom button card

[ASNNetworks]

I wouldn’t use browser_mod for that. When I used browser_mod to hide the header, it also cut a part settings page and stuff outside of dashboard.

Kiosk_mode is a far better option, that you can also use per dashboard settings and change more stuff what to hide including more-info dialog headers.

You can find it through HACS, more info: NemesisRE/kiosk-mode: Hides the Home Assistant header and/or sidebar (github.com)

[ibcm123]

Thank you very much for your quick response!
If I understand you correctly, the solution would be not to use button cards in the popup and instead use custom:button-cards, is that correct?
I’ve tried that, but unfortunately, it has no effect. I still don’t see anything displayed except for “title.”

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Gebe deinen PIN ein
    card:
      type: vertical-stack
      cards:
        - type: entity
          name: enter secret code
          entity: input_text.password_enter
          icon: mdi:radioactive
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              show_icon: true
              icon: mdi:numeric-1-box-outline
              show_name: false
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.add_one_to_password
            - type: custom:button-card
              show_icon: true
              icon: mdi:numeric-2-box-outline
              show_name: false
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.add_two_to_password
            - type: custom:button-card
              show_icon: true
              icon: mdi:numeric-3-box-outline
              show_name: false
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.add_three_to_password

I’ve also tried it with “entities” instead using buttons or custom:button-cards, but they are not displayed either.