Border Intermittently Appears Around Popup Content Section

[smartqasa]

Home Assistant 2023.7.2 Supervisor 2023.07.1 Operating System 10.3 Frontend 20230705.1 - latest

When calling browser_mod.popup, an unwanted border appears around content but then disappears as soon as any part of the screen is touched or clicked. Best shown with video... https://drive.google.com/file/d/1FEoDnfAHC_t2imiUJbABQVgc9HYr_Le7/view?usp=sharing

The border only shows up when a popup is initially called. Once you touch any part of the screen it disappears. In dark mode the border is white and black in light mode. I believe it may have to do with the styling of the 'content' class (https://drive.google.com/file/d/1JICXklRsgKs5EPizV5kyhnu9UPu__O2C/view?usp=sharing).

The issue first began after the last update (2.3.0) and occurs when using Chrome and Fully Kiosk.

I have eliminated most elements of the theming, i.e., --divider-color and border color. I set them all to transparent and the problem persists.

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

[chertvl]

Same here when calling fire-dom-event method.

[chertvl]

I believe it may have to do with the styling of the 'content' class

You are right, its 'content' div. If I add "outline: none" for that div, it dissapears. But I dont have success with card-mod to add that string here.

[xZetsubou]

Workaround: in your theme yaml modify card-mod-more-info-yaml

  card-mod-theme: theme_name

  card-mod-more-info-yaml: |
      ha-dialog > div { 
        outline: none !important;
      }

[smartqasa]

Thank you xZetsubou!!

[AndyVRD]

  card-mod-more-info-yaml: |
      ha-dialog > div { 
        outline: none !important;
      }

Hi,

Any idea why this is not working? I still get the borders (black...) around my popups.

    card-mod-more-info-yaml: |
      ha-header-bar$: |
        header {
          background: var(--card-background-color) !important;
          border-bottom: none;
        }
      ha-dialog > div { 
        outline: none !important;
        }

    card-mod-theme: "minimalist-desktop"

[chertvl]

  card-mod-more-info-yaml: |
      ha-dialog > div { 
        outline: none !important;
      }

Hi,

Any idea why this is not working? I still get the borders (black...) around my popups.

Better to add this 3 strings in browsermod.js file (in config/custom_components/browsermod/ folder) and clear your browser cache for page:

https://github.com/thomasloven/hass-browser_mod/pull/616/commits/8bfa09174c080f3f6a9e8447a2757279631d6786

[xZetsubou]

Hi,

Any idea why this is not working? I still get the borders (black...) around my popups.

When u make changes to theme u need to clear the cache for the browser, do hard reload CTRL+F5 better way to make sure everything reloaded try browser incognito mode.

[AndyVRD]

@chertvl Thanks works like a charm.

@xZetsubou Yep i did a F12 (Dev Tools) + right mouse click on the reload icon (Remove cache and force reload) but it was not working for some reason.

[smartqasa]

Here is the procedure that brought me success:

1. Edit browser_mod.js to include the 3 lines referenced above https://github.com/thomasloven/hass-browser_mod/commit/8bfa09174c080f3f6a9e8447a2757279631d6786
2. Delete browser_mod.js.gz
3. Delete the Browser Mod (from the Integration dashboard).
4. Restart Home Assistant
5. Reinstall the Browser Mod (from the Integration dashboard).
6. Clear cache on my browsers (including any Fully Kiosk browsers).

There may be an unnecessary step or two in all of that but it worked for me.

[xZetsubou]

Here is the procedure that brought me success:

1. Edit browser_mod.js to include the 3 lines referenced above 8bfa091
2. Delete browser_mod.js.gz
3. Delete the Browser Mod (from the Integration dashboard).
4. Restart Home Assistant
5. Reinstall the Browser Mod (from the Integration dashboard).
6. Clear cache on my browsers (including any Fully Kiosk browsers).

There may be an unnecessary step or two in all of that but it worked for me.

Actually you could use 7-zip to open browser_mod.js.gz then modify browser_mod.js to whatever you want, after finish editing .js file drag browser_mod.js into the opened window of 7-zip. or archive js file with 7-zip to gzip rather then drag and drop

[smartqasa]

Thank you. I am not familiar with the function of the .gz files or why they are necessary.

[pickonedev]

@chertvl Thanks works like a charm.

@xZetsubou Yep i did a F12 (Dev Tools) + right mouse click on the reload icon (Remove cache and force reload) but it was not working for some reason.

Can you explain better what I need to do for this to work? I get border as well, for popups...

[pickonedev]

  card-mod-more-info-yaml: |
      ha-dialog > div { 
        outline: none !important;
      }

Hi,

Any idea why this is not working? I still get the borders (black...) around my popups.

    card-mod-more-info-yaml: |
      ha-header-bar$: |
        header {
          background: var(--card-background-color) !important;
          border-bottom: none;
        }
      ha-dialog > div { 
        outline: none !important;
        }

    card-mod-theme: "minimalist-desktop"

@AndyVRD This is what i've done and it is working

  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      }
      .container, .content{outline: none !important;}

But still... this thing with card_mod does NOT have consistency. Sometime it is working, sometime it is not...

Any idea how to make this with full consistency?

[xZetsubou]

Any idea how to make this with full consistency?

@pickonedev

Are u sure you specified the correct theme name ? by name I mean the YAML head name. my theme name is umu_v1

you should end up with config similar to this. You are selecting wrong element it's not .content

umu_v1:
  ... # other theme configs
  card-mod-theme: umu_v1

  card-mod-more-info-yaml: |
      ha-dialog > div { 
        outline: none !important;
      }

keep in mind when you change something in theme u to reload frotnend. developer-tools -> Services -> frontend.reload_themes After reloading refresh the page with CTRL + F5 multiplie times. you need to make sure you configure card_mod to work with themes in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js # << add this

[pickonedev]

Any idea how to make this with full consistency?

@pickonedev

Are u sure you specified the correct theme name ? by name I mean the YAML head name. my theme name is umu_v1

you should end up with config similar to this. You are selecting wrong element it's not .content

umu_v1:
  ... # other theme configs
  card-mod-theme: umu_v1

  card-mod-more-info-yaml: |
      ha-dialog > div { 
        outline: none !important;
      }

keep in mind when you change something in theme u to reload frotnend. developer-tools -> Services -> frontend.reload_themes After reloading refresh the page with CTRL + F5 multiplie times. you need to make sure you configure card_mod to work with themes in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js # << add this

Yes, yes, all good.

This is the complete starting of my theme.

#
# PickOne-IOS
#
ios-dark-mode:
  # Global
  card-mod-theme: ios-dark-mode
  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      }
      .container, .content{outline: none !important}

For me, by adding an outline with the value none to class container and content, it is working, but as I said, it does not have consistency. And this fact it is to everything what I have used with card_mod to browser_mod popups, not only the outline, everything.

For example, I use this in order to blur the background of the popup, but still... no consistency.

      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              backdrop-filter: blur(15px) !important;
              -webkit-backdrop-filter: blur(15px) !important;
            }

Sometimes it is working, sometimes it is not.

I am using Fully Kiosk Browser on some Huawei tablets...

[xZetsubou]

I am using Fully Kiosk Browser on some Huawei tablets...

That's weird it's always works fine its kinda buggy sometimes but works tho, the fact that .container, .content works is weird Also why are using card_mod for background blur you could use --dialog-backdrop-filter

  browser_mod:
    service: browser_mod.popup
    data:
      style: |
        --dialog-backdrop-filter: blur(15px);

as for outline in worst case if nothing works with you from here download both files and replace the files inside /custom_components/browser_mod

[pickonedev]

--dialog-backdrop-filter: blur(15px);

I didn't know if is working with the backdrop like this :-D There is any documentation with all these --dialog.... styles which are wokring with the popups?

In those files, seems that ".content" is the "mistery" of solving the outline... I added ".container" to be 100% sure :-D

[xZetsubou]

There is any documentation with all these --dialog.... styles which are wokring with the popups?

There are variables by browser_mod in popups docs, but basically you can override any HA variable that are used by popups, using style for example dialog-backdrop-filter is part of ha-dialog frontend variables, You can also check browser_mod popups variables as well.

[jensrossbach]

@xZetsubou Is it possible to set the variable dialog-backdrop-filter via theme configuration to have it being applied to any popup in the frontend (or at least popups in lovelace dashboards)? I tried to add it to my theme yaml but it didn't have any effect. Looking into the developer tools of my browser, I can see that --dialog-backdrop-filter is undefined although I've set the variable in the theme. If I set it directly via the developer tools, it works like a charm, but I don't get it working with the theme configuration.

[xZetsubou]

@jensrossbach in your theme yaml keep in mind it will also works in config card popup as well since it's global to all ha popups

mytheme:
  dialog-backdrop-filter: blur(2em) brightness(0.80)

[jensrossbach]

Ok, now I got it working by applying this variable to the global theme I selected in the user configuration. It doesn't seem to work when applying it to a theme that is used in a specific dashboard only.

[xZetsubou]

@jensrossbach I don't think there's a normal way to do that at least as far as I know variables uses HA user theme not lovelaces theme.

[jensrossbach]

ok, thanks for the help @xZetsubou, applying this variable to the user theme is totally okay for me.

[smeen89]

I have the same issue, been trying the solutions sugested here with no luck. I get an orange border.

[Cheerpipe]

Hi.

I tested all fixes posted here and none of these worked consistently. The culprit was CloudFlare cache sendmi an older version of browsermod.js interminently.

I got the fix working permanently after do a full cache purge for my cloudflare DNS.

[GabrieleCarabella]

Try this:

action:
  - service: browser_mod.popup
    data:
      dismissable: false
      autoclose: true
      timeout: 10000
      title: "Your title here"
      size: wide
      style: |
        --popup-outline: none !important;
      content: "Text message"

[himisk2022]

Was there ever a solution here? The white frame around my popups is driving me crazy. No matter what I try, sometimes it's there, sometimes it's gone.

[z06Drew]

Same, I've tried the suggestions in this thread yet I still get the white border.

[smeen89]

Same here, driving me nuts!

[rog889]

I also tried all the workarounds, none of them worked! Driving me nuts too!

[bonstio]

+1 A fix would be nice.

[SlipstreamFPV]

Just bumping this for a fix. Thanks for all of your hard work.

[oyvhov]

+1 A fix would be nice.

[scorpiophenix]

I was getting an orange outline around the content on Android devices. Adding the following to the theme file seems to be working, you just need to make sure to clear the storage and cache for the Home Assistant Companion app.

  # Remove outline in popup content on mobile
  card-mod-more-info-yaml: |
    .: |
      .container, .content {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-focus-ring-color: rgba(0, 0, 0, 0);
        outline: none !important;
      }

Edit: You can also make this change in the browser_mod.js file if you prefer. The .content .container section already exists with the padding declaration.

      .content {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-focus-ring-color: rgba(0, 0, 0, 0);
        outline: none;
      }
      .content .container {
        padding: 8px 24px 20px 24px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-focus-ring-color: rgba(0, 0, 0, 0);
        outline: none;
      }