Can not click out of popup on iOS app

[Mariusthvdb]

My Home Assistant version: 0.XX.X

What I am doing: opening a markdown popup

What I expected to happen: have some way of clicking out of the popup

What happened instead:

cant click out, not even swipe in another view, can only completely swipe the app out of Phone, and reload

Minimal steps to reproduce:

# The least amount of code or steps possible to reproduce my error
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
# Put your code/steps here

Error messages from the browser console:

no errors

// Select everything from the browser console and copy it

// Paste it here

By replacing the space in the checkboxes ([ ]) with an X below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X ] Have made sure I am using the latest version of the plugin.

• [X ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[csudderth]

I can confirm this is happening for me as well. It started happening after updating HomeAssistant to 2023.7.3.

[tm24fan8]

Same for me after updating to 2023.7.3

In case it matters, this only happens on my iOS app on the phone...it works fine on my iPad.

[Lux315]

Happens for me aswell. Even on IOS and Android

[roderik-maker]

A temporary and not optimal fix, is to install card_mod and add the following to your popup cards: (For IOS, haven't yet tested on android)

card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-height: 10px !important;
    }

This returns the popups to a small size however, they are now at the bottom of the screen. I haven't yet figured out how to move them back up, but at least you don't have to quit the app to close a popup (This should help until a proper fix is implemented).

Example of full popup card:

type: custom:popup-card
title: Custom popup
dismissable: true
card:
  type: markdown
  content: This replaces the more-info dialog
right_button: right
left_button: left
entity: input_button.battery
card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-height: 10px !important;
    }

[YvesZH]

+1 same problem

[YvesZH]

card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-height: 10px !important;
    }

unfortunately does not work for ios

[jbrandek]

Ive bee able to fix it the problem is in browser_mod.js and browser_mod.js.gz on media querry 450px you should change it to this:

@media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: 97vw; --mdc-dialog-max-width: 97vw; --mdc-dialog-min-height: 10%; --mdc-dialog-max-height: 100%; } then delete cache

i leave the files if someone does not know how to edit them, just delete the ones from custom_components/browser_mod/

and replace this 2

dont know how to edit in github if someone knows please upload them so they are kept in next update browser_mod.zip

[ve1koz111]

@jbrandek I've tried this it does not fix it for IOS. Did this fix it for you?

[jbrandek]

@jbrandek I've tried this it does not fix it for IOS. Did this fix it for you?

Did you wipe the cache?

[ve1koz111]

Yes multiple times.

I've found a way to fix it on PC and mobile (when you inspect element and change to mobile) but unfortunately this does not fix my issue on IOS, even though I've deleted frontend cache multiple times.

https://github.com/ve1koz111/hass-browser_mod

[jbrandek]

Starnge, it fixes for me but im an android user, didnt try on iphone, dont know witch querry it uses... but try the full screen one the one that is before de 450px to see if that fixes it

[ve1koz111]

@jbrandek

https://github.com/thomasloven/hass-browser_mod/compare/master...ve1koz111:hass-browser_mod:master

I've changed everything possible

[jbrandek]

@jbrandek

https://github.com/thomasloven/hass-browser_mod/compare/master...ve1koz111:hass-browser_mod:master

I've changed everything possible

You also changed the js.gz one?

[ve1koz111]

I thought that’s created when it’s downloaded by HACS it’s not part of the code? Where can I find the compressed files?

[jbrandek]

I thought that’s created when it’s downloaded by HACS it’s not part of the code? Where can I find the compressed files?-- Mina Saweris

I upload them, you can compress the js wit an online gz compress tool i find it in google... try with the files i sent in the first message

[Alex-joomla]

Same problem for me, iOS 16.6, @roderik-maker s workaround didn't help

[ve1koz111]

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

Add https://github.com/ve1koz111/hass-browser_mod 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);

@Alex-joomla @jbrandek

[Simonh98]

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

Add https://github.com/ve1koz111/hass-browser_mod 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);

@Alex-joomla @jbrandek

Worked for me. Thanks!

[Alex-joomla]

@ve1koz111 tried but no effect (cleared cache):

[ve1koz111]

@Alex-joomla

Please let me know of the steps you followed to install this version

Thanks

[Alex-joomla]

Than you for your quick reply, i went to HACS, deinstalled the original browser-mod (hit ignore), then added your repo and installed it. Then I cleared my browser cache on my iPhone (Debug Menu)

[Alex-joomla]

Now it works, I did nothing else :-)

Thank you, you saved our i Home :-)

[tm24fan8]

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

Add https://github.com/ve1koz111/hass-browser_mod 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);

@Alex-joomla @jbrandek

Works for me. Appreciate it!

[danielducu]

31 October and no fix for this, I wonder if this project is still on. Should we look for alternatives ?

[se7entynine]

Hey, I still have the same problem on my android app, but unfortunatly I can't add your repository as it isn't structure v5.0 complaint.

Error message: <Plugin ve1koz111/hass-browser_mod> Repository structure for v5.0 is not compliant

[danielducu]

Hey, I still have the same problem on my android app, but unfortunatly I can't add your repository as it isn't structure v5.0 complaint.

Error message: <Plugin ve1koz111/hass-browser_mod> Repository structure for v5.0 is not compliant

This project has fallen into the void unfortunately. Check out bubble card , it's flawless.

[bkbartk]

for me it stopped working recently, not since half a year, but it also doesn't work on my browser on IOS. so maybe It's an IOS(webkit) issue?