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:
component: oh-cell
config:
title: Popup Card
slots:
default:
- component: oh-link
config:
text: Open the popup
popupOpen: .demo-pop
- component: f7-popup
config:
class: demo-pop
style:
background-color: rgb(220,220,220)
border-radius: 30px
height: 500px
text-overflow: ellipsis
width: 500px
slots:
default:
- component: widget:caddx_graphic_portrait_V6
config:
text: Close it again
popupClose: .demo-pop
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.
Works just fine. Now just to sort out one little niggle that I can’t trace.
Seems like one of my cars if being populated and I can’t see where or how? Doesn’t happen when I don’t use this method, but will continue debugging and post a new thread if I don’t come right.
