#I almost have the pop-up being centered
crimson nacelle
nice. good luck
sounds like that'll be styling specfic to that card, yes?
the theme method while being a little annoying to switch off the default is compelling as it would fix the centering issue for all cards (including native more-infos)
native urchin
Yup. This is a per pop-up configuration via card-mod. It is not "invasive" like the theme workaround. I've been able to get it to work with the call-service to a registered screen through the Services tab and a fire-dom-event on a card. I was also able to make it appear at the bottom of the screen but that was only manually while inspecting the page.
native urchin
Call-service method
Note: This example targets a device; switch to UI mode and change to a registered browser or remove the target to broadcast to all registered browsers (IIRC).yaml 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-eventyaml 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); }
I went with Rainviewer instead of Windy because its embed is animated.
Backdrop color and blur effect added (because it looks cool) and ensured ha-dialog{} was still accessible for other card_mod options. (Used RGBA(0,100,100,0.4) to make it more noticeable in the screenshot, but I prefer 100,100,100 for light gray.
crimson nacelle
you're a legend