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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[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 live 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

[Symon84]

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 live 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

I've solved the pop up problem on iOS with your mods! Thank you so much!!!

[RezzZ]

problem stil persists but I just discovered that clicking on the very edge of the screen left or right will actually get you back to HA without force quitting and restarting the app.

[LucianTothezan]

The problem is still there. Isn`t there really no solution to it? Maybe add the option to have both solutions if not going back to the solution that we had before...

[Ronnie-J]

Same problem. Not sure how to fix this.

[RezzZ]

Same problem. Not sure how to fix this.

Set page zoom to 85% in the companion app (settings -> general). Everything will be smaller though but it could be a fix. I think this repo is dead. I removed it and stopped using the popup now.

[image969]

A whole bunch of card mod did it for me, but this is what finally worked

type: custom:mushroom-template-card primary: Lowes icon: mdi:hammer-wrench card_mod: style: | mushroom-shape-icon { --icon-color: grey !important; } secondary: '' layout: vertical tap_action: action: fire-dom-event browser_mod: service: browser_mod.popup data: card_mod: style: | ha-dialog { --mdc-dialog-min-height: 10px !important; --vertical-align-dialog: center !important; --ha-dialog-border-radius: 30px !important; } content: type: custom:stack-in-card cards: - type: vertical-stack cards: - type: custom:mushroom-title-card title: '' - type: picture image: local/lowes-list2.png card_mod: style: | ha-card { margin-top: -10px; } tap_action: action: none hold_action: action: none - type: custom:mushroom-title-card title: '' - type: todo-list entity: todo.lowes card_mod: style: ha-textfield: $: | .mdc-text-field { margin-top: -28px; margin-bottom: 5px; height: 50px !important; } .mdc-text-field__input { color: white !important; } .: | ha-card.type-todo-list div.header { display: none; } ha-check-list-item.editRow.completed { display: none; } :host { --mdc-checkbox-ripple-size: 33px; } ha-check-list-item { min-height: 25px !important; } ha-card { --mdc-typography-subtitle1-font-size: 16px; } ha-icon-button.reorderButton, ha-icon-button.addButton { margin-top: -35px !important; } .divider { display: none; } ha-card { margin-bottom: -15px; }