Not really if you are using the OH actions to open the popup. As you have seen, defining the f7 variables in the widget doesn’t work. That’s because the way f7 creates the popups at a much higher level than the widgets so the css from the widgets cannot “cascade” down to the popup. It’s possible that if you tried to define things like --f7-popup-tablet-width in the page config, then that might work, but it’ll apply to all the popups that happen on the page, which you probably don’t want.
To have full control over the appearance of the popup you have to build the popup manually using the f7-popup. There’s a quick example of how to do this in the updated docs:
A style object added to the f7-popup config will have full effect on that popup and in the default slot, you can just continue to build a widget as you would at any other point including adding your own already defined widgets using the
That helps a lot. I am however trying to call the popup directly from my Overview Page using an oh-cell (bypassing OH actions as per your example). This however makes it a two step opening and closing process:
Using the code as follows:
title: Popup Card
- component: oh-link
text: Open the popup
- component: f7-popup
- component: widget:caddx_graphic_portrait_V6
text: Close it again
I can’t seem to get the f7-popup to call directly from the oh-cell.
Do you have any suggestions? The sizing etc of the popup however works great!
Alas, there’s no way to make this work directly. The oh-cell family of components does not have the popupOpen etc. set of properties. In order to make something like this work smoothly for my own setup I just completely rebuilt an oh-cell style component from the base f7 parts which is a bit of a hassle.
You can do a pretty good job of simulating what you want by adding a button to the background of the cell and using the button’s popupOpen property instead.