The f7 photo browser is not supposed to render anything immediately.
This isn’t going work in the widget system because you need access to the vue context to open the broswer after the vue component just instantiates it.
Is there a reason you are trying to do this instead of just using the OH photos action?
I want to extend this by 2 more actionPhotos sources which I want to trigger by button press or a tabbed presentation.
In any case I do not want to create 3 separate oh-cells.
Another alternative by an expanded card containing three buttons to launch the actionPhoto is also not really my preferred solution.
Tha’ts why I came up with the idea of embedding the photo-browser in an expaded card.
Most likely then, you’ll just have to construct your own browser from scratch using a swiper or something like that. I cannot think of any workaround that would get the f7-photo-browser working via widgets.
You could add a feature request that adds a photo browser component (or possibly lets the oh-image act a photo broswer if supplied with an array of image sources).
I see no reason why that shouldn’t work, depending on the style and functionality that you are aiming for. If you post that code, or start a new thread, we can take a look at it.
Problem is to get the swiper spread across the full width and height of the available screen. Setting height and width does not work as probably the container does not know the size of the expanded card (border style just for controlling purposes to better see the results)
This problem comes from the fact that you are putting this on an oh-cell. If you look at the oh-cell vue definition, you can see that default slot components that get added to the expanded cell contents get put inside an extra div:
That extra div has no styling. This means that it’s height and width are determined by the size of its child elements. Setting the height and width as percentages won’t work as long as that div has no concrete height and width of its own (it cannot be meaningful to set a width to 100% of the minimum size required to contain that 100%). If you set the height and width of the swiper to absolute values, you would see that those values work. You could use an absolute value because the expanded card is set to a constant 670px. But, if you want relative sizing to work, you need to give that extra div a concrete (or relative to its parent) size.
That can’t be done with an easy setting because the vue file doesn’t assign any properties to that div, so you’ll have to use a stylesheet in the cell itself:
ok. Getting closer but still difficult for me. I am not getting the desired result no matter in which combination I set (or do not set) size style for f7-swiper, f7-swiper-slide and oh-image.
This gets even more explicit with the restricting the height of the card contents (and subtracts the extra used space from the top), and then lets the extra div do more of the work determining the size of the slider. You still need to the width declarations on the images so that they shrink to fit (you way also need height if any of your images are ever taller than they are wide), but the rest of the size declarations become unnecessary.
Not quite as easily. It can definitely be done, but I have never tried it because my guess is that’s it’s way more trouble than it’s worth given the number of hard coded size and position values you have to find and override. If you want something bigger, just set the cell to open a sheet modal which will take up at least full screen width always and the fullscreen height as needed.