No way to close popup without header on iOS app

[marcusforsberg]

My Home Assistant version: 2022.5.5

What I am doing:

I have a set of popups with additional controls that I use on my main dashboard. For aesthetic purposes, I have configured them to not have headers. This means they also don't have any close buttons. This is fine on my tablet since I can just tap outside of the popup to close it. However, this doesn't work on mobile (iOS app in my case).

What I expected to happen:

I expect to be able to tap outside of the popup on mobile to close it.

What happened instead:

The popup is displayed in full-screen mode on mobile screen sizes, which means it's impossible to tap outside of it. That means I'm stuck with the popup open and the only way to close it is to relaunch the app entirely.

See also #243.

It would be nice to be able to hide the header (i.e. the name/title) but still choose to have the X icon visible on mobile. Alternatively if the popup could be set to not automatically be full height so that you can still tap outside of it.

Minimal steps to reproduce:

# The least amount of code or steps possible to reproduce my error
type: button
name: Open popup
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    hide_header: true
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: This popup is impossible to close on mobile

# Put your code/steps here

1. Create a button that triggers a popup with a single card in it, but no header (hide_header: true)
2. Open the popup on desktop/tablet screen - you can close it by tapping outside of it
3. Open the popup on a mobile screen - there is no way to close it.

Error messages from the browser console:

Not applicable.

---

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.

[marcusforsberg]

[antonio1475]

Hi. Not a solution but a temporary workaround.

I was bothered by the fact that popups open full-screen on mobile (iOS at least), with the cards at the top. Especially for a tiny card like I was doing (a light slider using Mushroom cards).

So I played with the popup style options, and with this I was able to make the popup card not be full-screen, adjust to my card size and by clicking anywhere outside the card, it closes.

                    style:
                      $: |
                        @media (orientation: portrait) {
                          div {overflow:hidden!important;}
                          .mdc-dialog__surface {box-shadow: none;}
                          .mdc-dialog__container{height: 66px;border-radius:0px;}
                        }

https://user-images.githubusercontent.com/63130724/175819271-81409e65-3184-44ab-a74c-ffaca1cd7d10.MP4

whole action with card as reference:

                double_tap_action:
                  haptic: heavy
                  action: call-service
                  service: browser_mod.popup
                  service_data:
                    card:
                      type: custom:mushroom-light-card
                      entity: light.habitacion
                      show_brightness_control: true
                      icon_type: none
                      primary_info: none
                      secondary_info: none
                    large: false
                    hide_header: true
                    style:
                      $: |
                        @media (orientation: portrait) {
                          div {overflow:hidden!important;}
                          .mdc-dialog__surface {box-shadow: none;}
                          .mdc-dialog__container{height: 66px;border-radius:0px;}
                        }

[roopesh]

@antonio1475 - Thank you! That is an awesome workaround! I was so annoyed by the iOS popup, too. I'm using mushroom in a popup too so this works perfectly!

[antonio1475]

I think this is solved / no longer necessary in browser_mod 2.x, at least if the card isn't bigger than the screen.

I've removed all the styles and using the code below. The generated popup card is self-adjusting in size, and just tapping outside closes it

                double_tap_action:
                  haptic: heavy
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      content:
                        type: custom:mushroom-light-card
                        entity: light.habitacion
                        show_brightness_control: true
                        show_color_temp_control: true

[roopesh]

Yeah, the timing was almost perfect :). I would've given up on browser_mod if I hadn't been able to have this workaround when I did, anyways. Thank you!

[roopesh]

Upgrade to the latest version. No hacks needed anymore.

On Thu, Sep 15, 2022 at 7:08 AM image969 @.***> wrote:

Hello. I've been struggling with this as well. Can you tell me how exactly I can adjust the size of the window with browser mod 2 for my iphone? I dont see the option and I HATE full screen on the phone

— Reply to this email directly, view it on GitHub https://github.com/thomasloven/hass-browser_mod/issues/332#issuecomment-1248153220, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABXEKFVJXBV7OS6YRN5TO3V6MUUFANCNFSM5XGQASDQ . You are receiving this because you commented.Message ID: @.***>

--

Roopesh