Open smartqasa opened 1 year ago
Same here when calling fire-dom-event method.
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.
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;
}
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"
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:
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
.
@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.
Here is the procedure that brought me success:
- Edit browser_mod.js to include the 3 lines referenced above 8bfa091
- Delete browser_mod.js.gz
- Delete the Browser Mod (from the Integration dashboard).
- Restart Home Assistant
- Reinstall the Browser Mod (from the Integration dashboard).
- 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
Thank you. I am not familiar with the function of the .gz files or why they are necessary.
@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...
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?
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
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 configurecard_mod
to work with themes inconfiguration.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...
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
--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
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.
@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.
@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)
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:
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"
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 .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;
}
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.