after 2.2.0 update all popups are at the top of the screen

[maverik80]

My Home Assistant version: 2023.01

**What I am doing:**hello everyone, after updating to the latest version I'm experiencing all the pop ups appear moved to the top of the screen, while before they were all in the center, I've read the documentation but I can't find any string that can help me. I am attaching an image, any help and welcome, thanks guys

tap_action:
action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    style: |
      --popup-min-width: 400px;
    title: Setting luce Disimpegno
    dismissable: false
    timeout: 60000
    right_button: Indietro
    content:
      type: custom:mushroom-light-card
      entity: light.disimpegno
      show_color_temp_control: true
      collapsible_controls: true

[sagaland93]

Same for me. I'd also like popups to be centered like before.

[maverik80]

I couldn't figure out if it was my problem, but now thanks to you I understand that it's not, I searched far and wide but no option found, I hope for an update or for someone to explain to me How to do it, I at least explain to me

[antonio1475]

Same here. Not good for some small light control popups on mobile...

I saw popups in the latest changelog, so I immediately thought of this...

[pickonedev]

Same here... everywhere, on computer, tablet, phone, all device will show the popup on top, not centered

[antonio1475]

Not only it's at the top now, but on desktop the card is now within another one.

Before (card only, center):

After (card within card, top):

[sagaland93]

Matt solved it. Tested the changes he made to his themes.yaml and it works for me.

[antonio1475]

Matt solved it. Tested the changes he made to his themes.yaml and it works for me.

I guess I don't know how to use that, because adding that file to my themes folder not only didn't fix it (using a Minimalist theme), but it generated Supervisor errors on restart.

I might have found the root cause:

Line 141 of browser_mod.js has a typo: --vertial-align-dialog: flex-start; vertial

So I changed it to: --vertical-align-dialog: center; Note that I also had to change it to center

As per the "background" card, in 2.2.0 a bunch of paddings and margins where added for whatever reason... Instead of fighting that, I went with a simple edit of line 153 to make it transparent. From:

        --mdc-theme-surface: var(
          --popup-background-color,
          var(--ha-card-background, var(--card-background-color, white))
        );

to --mdc-theme-surface: transparent; I don't know the impact of this on other places! I'm only using popups for these light control popups, so it works for me. I consider this a temporary workaround

[pickonedev]

I have solved by adding this to my themes.yaml

my-theme:
  card-mod-theme: my-theme
  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      }    

Just change "my-theme" with your theme name and all good

[silvannn]

card-mod-more-info-yaml: | .: | ha-dialog { --vertical-align-dialog: center !important; } I added this to theme what I am using and it doesn't work.

[Simonh98]

Does anyone have a solution for this?

[pickonedev]

my-theme:
  card-mod-theme: my-theme
  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      } 

[Simonh98]

my-theme:
  card-mod-theme: my-theme
  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      } 

Unfortunately, this doesn't work for me

[pickonedev]

The fact is that this code... it is not working all the time. Sometimes I need to refresh the page multiple times till the code will react. I don't know why it is acting like this. Sometimes it is working, sometime not...

[aLAN-LDZ]

same here... te popup is on the top :( how to fix it ?

[antonio1475]

For me the current solution (especially targeted for mobile) is to add / replace this on your theme yaml file:

  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  card-mod-more-info-yaml: |
    .: |
      @media (max-width: 450px) {
        ha-dialog {
            --mdc-dialog-min-width: calc(95vw)!important;
            --mdc-dialog-min-height: 0!important;
            # --mdc-dialog-max-height: 90%!important;
            # --dialog-surface-margin-top: 20px!important;
            --ha-dialog-border-radius: 20px!important;
            --vertical-align-dialog: center !important;
        }
      }
    ha-more-info-info:
      $: |
        @media (max-width: 450px) {
          .container {
            min-height: auto!important;
          }
        }

Also editing the more-info native popup...:

[lichenophile]

Just tried this out. For me, like other suggested solutions, it is inconsistent.

Have you tested a handful of refreshes? Browser_mod popups will still often appear at the top of the page for me. (in both the companion app, firefox and simulated mobile view on firefox)

[antonio1475]

Just tried this out. For me, like other suggested solutions, it is inconsistent.

Have you tested a handful of refreshes? Browser_mod popups will still often appear at the top of the page for me. (in both the companion app, firefox and simulated mobile view on firefox)

It is 100% consistent for me in both desktop and iOS app.

[pickonedev]

For me... it is not consistent :-( The consistency is like 2 of 10

[jabronimus]

For me the current solution (especially targeted for mobile) is to add / replace this on your theme yaml file:

  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  card-mod-more-info-yaml: |
    .: |
      @media (max-width: 450px) {
        ha-dialog {
            --mdc-dialog-min-width: calc(95vw)!important;
            --mdc-dialog-min-height: 0!important;
            # --mdc-dialog-max-height: 90%!important;
            # --dialog-surface-margin-top: 20px!important;
            --ha-dialog-border-radius: 20px!important;
            --vertical-align-dialog: center !important;
        }
      }
    ha-more-info-info:
      $: |
        @media (max-width: 450px) {
          .container {
            min-height: auto!important;
          }
        }

If I want to add this code to a specific popup, where do I add it? I don't think adding it to themes.yaml would work because there are multiple subfolders in my themes folder

[shlomki]

Running into the same problem, however for me none of the solutions above helped. It's interesting how this isn't happening for everyone, perhaps there is a conflict with another card?

[antonio1475]

Running into the same problem, however for me none of the solutions above helped. It's interesting how this isn't happening for everyone, perhaps there is a conflict with another card?

Things keep changing in HA too. However, my solution continues to work in 2023.6.2

@jabronimus you add it to the theme that you use (or all). Here's my Minimalist UI (modified for popups) theme as reference:

Click to expand

---
minimalist-desktop-popup:
# Journal
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
ha-card-border-radius: "var(--border-radius)"
error-color: "var(--google-red)"
warning-color: "var(--google-yellow)"
success-color: "var(--google-green)"
info-color: "var(--google-blue)"
divider-color: "rgba(var(--color-theme),.12)"
accent-color: "var(--google-yellow)"
ha-dialog-border-radius: "10px"
# fix added border-lines in 2022.11
ha-card-border-width: "0px"
card-mod-theme: "minimalist-desktop-popup"
card-mod-view-yaml: |
  "*:first-child$": |
    #columns .column > * {
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 5px;
    }
card-mod-more-info-yaml: |
  .: |
    @media (max-width: 450px) {
      ha-dialog {
          --mdc-dialog-min-width: calc(95vw)!important;
          --mdc-dialog-min-height: 0!important;
          # --mdc-dialog-max-height: 90%!important;
          --vertical-align-dialog: center !important;
          --dialog-surface-margin-top: 20px!important;
          --ha-dialog-border-radius: 20px!important;
      }
    }
  ha-more-info-info:
    $: |
      @media (max-width: 450px) {
        .container {
          min-height: auto!important;
        }
      }

modes:
  light:
    # text
    primary-text-color: "#212121"
    # main interface colors
    primary-color: "#434343"
    google-red: "#F54436"
    google-green: "#01C852"
    google-yellow: "#FF9101"
    google-blue: "#3D5AFE"
    google-violet: "#661FFF"
    google-grey: "#BBBBBB"
    color-red: "245, 68, 54"
    color-green: "1, 200, 82"
    color-yellow: "255, 145, 1"
    color-blue: "61, 90, 254"
    color-purple: "102, 31, 255"
    color-grey: "187, 187, 187"
    color-pink: "233, 30, 99"
    color-theme: "51,51,51"
    color-background-yellow: "250, 250, 250"
    color-background-blue: "250, 250, 250"
    color-background-green: "250, 250, 250"
    color-background-red: "250, 250, 250"
    color-background-pink: "250, 250, 250"
    color-background-purple: "250, 250, 250"
    color-yellow-text: "var(--primary-text-color)"
    color-blue-text: "var(--primary-text-color)"
    color-green-text: "var(--primary-text-color)"
    color-red-text: "var(--primary-text-color)"
    color-pink-text: "var(--primary-text-color)"
    color-purple-text: "var(--primary-text-color)"
    opacity-bg: "1"
    # background and sidebar
    card-background-color: "#FAFAFA"
    primary-background-color: "#EFEFEF"
    secondary-background-color: "#EFEFEF"
    # header
    app-header-text-color: "var(--primary-text-color)"
    app-header-background-color: "var(--primary-background-color)"
    # paper-tabs-selection-bar-color: "var(--primary-text-color)"
    # slider
    slider-color: "rgb(var(--color-blue))"
    slider-bar-color: "rgba(var(--color-blue),0.38)"
    # cards
    box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
    ha-card-box-shadow: "var(--box-shadow)"
    # sidebar
    sidebar-selected-text-color: "var(--google-red)"
    sidebar-selected-icon-color: "var(--google-red)"
    sidebar-text-color: "#80868b"
    # switch
    switch-checked-color: "var(--google-blue)"
    # media player
    mini-media-player-accent-color: "var(--google-blue)"
  dark:
    # text
    primary-text-color: "#DDDDDD"
    # main interface colors
    primary-color: "#89B3F8"
    google-red: "#F18B82"
    google-green: "#80C994"
    google-yellow: "#FCD663"
    google-blue: "#89B3F8"
    google-violet: "#BB86FC"
    google-grey: "#BBBBBB"
    color-red: "241, 139, 130"
    color-green: "128, 201, 148"
    color-yellow: "252, 214, 99"
    color-blue: "137, 179, 248"
    color-theme: "221,221,221"
    color-purple: "102, 31, 255"
    color-grey: "187, 187, 187"
    color-pink: "233, 30, 99"
    color-background-yellow: "var(--color-yellow)"
    color-background-blue: "var(--color-blue)"
    color-background-green: "var(--color-green)"
    color-background-red: "var(--color-red)"
    color-background-pink: "var(--color-pink)"
    color-background-purple: "var(--color-purple)"
    color-yellow-text: "var(--color-yellow)"
    color-blue-text: "var(--color-blue)"
    color-green-text: "var(--color-green)"
    color-red-text: "var(--color-red)"
    color-pink-text: "var(--color-pink)"
    color-purple-text: "var(--color-purple)"
    opacity-bg: "0.1"
    # floating button text color
    mdc-theme-on-secondary: "var(--card-background-color)"
    # background and sidebar
    card-background-color: "#1D1D1D"
    primary-background-color: "#121212"
    secondary-background-color: "#121212"
    # header
    app-header-text-color: "var(--primary-text-color)"
    app-header-background-color: "var(--primary-background-color)"
    paper-tabs-selection-bar-color: "var(--primary-text-color)"
    # Sidebar
    sidebar-selected-text-color: "rgb(var(--color-blue))"
    sidebar-selected-icon-color: "rgb(var(--color-blue))"
    # Slider
    slider-color: "rgb(var(--color-blue))"
    slider-bar-color: "rgba(var(--color-blue),0.38)"
    # card
    box-shadow: "none"
    # media player
    mini-media-player-accent-color: "var(--google-blue)"
    # Journal
    state-icon-color: "rgb(var(--color-theme))"

[lichenophile]

Things keep changing in HA too. However, my solution continues to work in 2023.6.2

Doesn't solve it for me.

Multiple browsers have the issue intermittently. Sometimes I can refresh the page dozens of times without it playing up, sometimes I can refresh many times and not have it solve.

Which browsers are you using?

[pickonedev]

The problem is that there is NO consitency... Sometime it is working, sometime it is not working... If I refresh the page, I have 90% chances to not work, if I refresh multiple times, I get this work 6 of 10...

The only way it will for for me, 100%, is to open the popup in the first 200-500ms after the content appear on the page after refreshing it...

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

[dsellers1]

I've been able to center the pop-up within card_mod (and not having to rely on the theme method). This works for browser_mod.popup and fire-dom-event. (Background color and blur added because I think it looks cool.)

card_mod:
  style:
    ha-dialog$: |
      div.mdc-dialog div.mdc-dialog__scrim {
        background: rgba(0, 100, 100, 0.4);
      }
      div.mdc-dialog__container {
        --vertical-align-dialog: center !important;
      }
    .: |
      ha-dialog {
        --dialog-backdrop-filter: blur(0.8em); 
      }

call-service in Dev Tools example

(This example targets a registered browser. Change it to one of your devices or remove the target section.)

service: browser_mod.popup
data:
  content:
    aspect_ratio: 100%
    type: iframe
    url: >-
      https://www.rainviewer.com/map.html?loc=40.1957,-83.9575,6&oFa=1&oC=1&oU=0&oCS=0&oF=0&oAP=1&c=3&o=83&lm=0&layer=sat-rad&sm=1&sn=1&hu=false
  card_mod:
    style:
      ha-dialog$: |
        div.mdc-dialog div.mdc-dialog__scrim {
          background: rgba(0, 100, 100, 0.4);
        }
        div.mdc-dialog__container {
          --vertical-align-dialog: center !important;
        }
      .: |
        ha-dialog {
          --dialog-backdrop-filter: blur(0.8em); 
        }
  dismissable: true
  autoclose: false
  timeout: 15000
  size: normal
target:
  device_id: 8721b7679af078d2eab177cbe434f900

fire-dom-event in a button card example

type: button
name: Pop-up
show_name: true
show_icon: true
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      dismissable: true
      autoclose: true
      timeout: 7500
      content:
        aspect_ratio: 84.5%
        type: iframe
        url: >-
          https://www.rainviewer.com/map.html?loc=40.1957,-83.9575,6&oFa=1&oC=1&oU=0&oCS=0&oF=0&oAP=1&c=3&o=83&lm=0&layer=sat-rad&sm=1&sn=1&hu=false
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog div.mdc-dialog__scrim {
              background: rgba(0, 100, 100, 0.4);
            }
            div.mdc-dialog__container {
              --vertical-align-dialog: center !important;
            }
          .: |
            ha-dialog {
              --dialog-backdrop-filter: blur(0.8em); 
            }