Border Intermittently Appears Around Popup Content Section #615
Comments
|
Same here when calling fire-dom-event method. |
You are right, its 'content' div.
|
|
Workaround: in your theme yaml card-mod-theme: theme_name
card-mod-more-info-yaml: |
ha-dialog > div {
outline: none !important;
} |
|
Thank you xZetsubou!! |
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) |
When u make changes to theme u need to clear the cache for the browser, do hard reload |
|
@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. |
|
Here is the procedure that brought me success:
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 |
|
Thank you. I am not familiar with the function of the .gz files or why they are necessary. |
Can you explain better what I need to do for this to work? I get border as well, for popups... |
@AndyVRD This is what i've done and it is working 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? |
Are u sure you specified the correct theme name ? by name I mean the YAML head name.
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. 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. 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. Sometimes it is working, sometimes it is not. 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 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 |
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
|
There are variables by browser_mod in popups docs, but basically you can override any HA variable that are used by popups, using |
|
@xZetsubou Is it possible to set the variable |
|
@jensrossbach in your theme mytheme:
dialog-backdrop-filter: blur(2em) brightness(0.80)
|
|
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. |
|
@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. |
|
ok, thanks for the help @xZetsubou, applying this variable to the user theme is totally okay for me. |
|
I have the same issue, been trying the solutions sugested here with no luck. I get an orange border. |
|
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. |
|
Try this: |
|
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. |
|
Same, I've tried the suggestions in this thread yet I still get the white border. |
|
Same here, driving me nuts! |
|
I also tried all the workarounds, none of them worked! Driving me nuts too! |
|
+1 A fix would be nice. |
|
Just bumping this for a fix. Thanks for all of your hard work. |
|
+1 A fix would be nice. |
|
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 {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
outline: none !important;
}
.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 !important;
} |
|
Why hasn't this solution been included in any updates yet? |
|
I cant seem to get rid of the white outline either. For a while it was gone, but there must have been some update that brought it back and I cannot recall what I previously did to resolve it. I've tried everything in this post now but nothing is working. Any new suggestions? |
|
Please fix this. |
|
The fix I posted above still seems to be working. I am using the first option of adding the code inside my theme and have no problems across multiple devices on Android 8, 10, and 14. Can you provide more information about what device you are seeing the white outline on and what version of Android? |
I am a newbie. I am not sure which theme file? Do I need to create a new file themes.yaml and paste your code? For example, I use Mushroom Theme. Do I add your code in mushroom.yaml? Thanks |
It's been a while since I've used the mushroom cards and don't remember the structure of the theme file. It might be easier to follow the 2nd option and update the browser_mod.js file. You can get to this file by going to your custom_components folder and opening the browser_mod folder (see image).
From there, you will want to edit the browser_mod.js file and search for the Original Updated After saving these changes, restart Home Assistant and clear the cache in the browser of the device you are having the issue on. It should hopefully resolve the issue you are having with the outline. |
Thanks so much for the detailed instructions. It does work! I tested from Android tablets, and I do not see the white outline anymore form the popup! So, I guess if browser_mod has any update, I have to update that section every time I update the browser_mod, correct? Thanks so much! You are the best! |
So glad that it worked out for you. I've added the pull request 764 to hopefully get this fixed on a future update. You are correct, this will need to be done every time that browser_mod is updated until this or another fix has been implemented. |
So sorry. Don't know what happened. The white outline reappear again for all the browser mod popups. :-( |
Can you share what device this is happening on? Also, does the outline disappear after you interact with the popup or is it always there? If you can provide a screenshot, that would be really helpful to troubleshoot. |
So, all the Samsung Galaxy Tablets running Android with Fully Kiosk, and all standalone Chrome browsers (not Fully Kiosk) on tablets and desktop have this white outline issue for all the browser_mod popup. I tested with Safari on Mac and iPad, and there's NO white outline in Safari browsers. Attached (1st picture) is a screenshot of white outline issue. 2nd screenshot was taken from a Safari browser. 
|
Thanks for the additional information. I believe I found what was causing this issue and have (hopefully) fixed it. Please follow the exact same steps provided above again. I've updated the CSS in my previous post and am adding it here for reference. Something seems to be changing the outline css, so we need to override that with the .content {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
outline: none !important;
}
.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 !important;
} |
I applied your new code with !important; and did further testing. Here is what I found on my 3 Samsung tablets. Each tablet is running different version of Android, 12, 13, and 14. I suspect Google did some changes after Android 12. My tablet with Android 12 doesn't have any white outline at all. Android 13 and 14 started to have this white outline issue even I applied the "important" code. I don't know what else we can do, it seems Android 13 and 14 is doing something strange with the browser_mod pop ups. :-( There's one more thing I discovered while I was doing the testing. The problem tablets with Android 13 & 14, if I tap on the Title bar (mmWave Human Sensor title area on the previous picture attachment) on the popup, the white line immediately disappears. It's "interactive"!!! I never knew that. Anyway, this is new to me. Thought you might want to know. |
Thanks for confirming! You are definitely dealing with an issue where the focus is being applied to the popup and causing this issue. Removing the outline usually resolves that issue in my experience. Make sure that you have the cache cleared on the tablets and try restarting Home Assistant and isolating some of the components being used. Can you try accessing your dashboard with the popup from a browser on the tablet and not do it through Fully Kiosk to see if that is introducing the problem? If that doesn't work, you can try the below untested "throw the kitchen sink" at it solution and see if that solves it for you. .content {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
outline: none !important;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.content:focus-visible {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
outline: none !important;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 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 !important;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.content .container:focus-visible {
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 !important;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
} |
Hi, I applied the code and rebooted, but the issue persisted. So, I conducted further investigation and discovered that one dashboard view doesn’t encounter this problem with the popups. I then checked if my YAML code or card_mod was different, and they were identical. I delved deeper and found that the specific “working” view uses the “Mushroom Shadow” theme, while the rest of my views use the “Mushroom” theme. I believe I’ve identified the culprit: the “Mushroom Theme.” Last year, I think I mistakenly switched that view to “Mushroom Shadow.” However, all my views, including the Main home view, are using the generic “Mushroom” theme. I sincerely apologize for all the trouble caused. I truly appreciate your efforts in going above and beyond to help resolve this peculiar issue. Thank you |
it's worked for me ,thx, :) |
|
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. |
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.
Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
Have made sure I am using the latest version of the plugin.
Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
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.
The text was updated successfully, but these errors were encountered: