Popup size properties

Add-ons UIs
1

I have several oh-image-cards with current pictures of different webcams.
Once clicked a popup opens to display the webcam with some additional sliders and date choosing features etc.
The point is on a tablet or a phone the Popup opens full screen. But on a computer screen the popup is really small.
Can I somehow define how big the popup looks an a PC monitor so I can have a rather large one (not Fullscreen)?

Andy

2

Hi @AndreasK

if you use custom widgets for your popups, you can use the f7-styling variables for this. Just add this to your f7-popup component:

--f7-popup-tablet-width: 900px
3

So I should build my own widget with the f7-popup so I can manipulate it with the suggested parameter. Ok got it.
But how can I use a f7-popup to display a page like I do currently with the “normal” popup:

- component: oh-image-card
     config:
     item: SqueezeEvita_Cover
     action: popup
     actionModal: page:page_a747857fa8
4

ok sorry I did figure it out:
I made a widget with this content:

uid: widget_WebCamPopup
component: f7-card
slots:
  default:
    - component: oh-webframe-card
      config:
        src: https://***
    - component: oh-button
      config:
        action: navigate
        actionPage: page:page_a747857fa8
        actionPageTransition: f7-dive
        style:
          --f7-button-bg-color: transparent
          --f7-button-hover-bg-color: transparent
          --f7-button-pressed-bg-color: transparent
          height: 100%
          width: 100%
          position: absolute
          left: 0px
          top: 0px
          z-index: 999
2 Likes
5

FYI there is a thread with a heap of examples you can use, search for oh3 camera widget

6

thx but mine is a bit different since I integrated a slider to slide through all the past images, so I can scroll through the day and see if something special happend.
Additionally I have a date selector to choose past days to display the same way.

7

Cool will have to check it out to see how it works. There are multiple ways and each one has its advantages.

8

I use cards with the following yaml to open up popups with my locations based layout pages. Unfortunately the popup is very small on my regular desktop. I’ve already tried to set the f7-popup-tablet-width, but either it did not work or used it at the wrong component. Is there another way to change the popup size?

component: oh-link
config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 110px
          width: 100
9

define your popup in a default slot and open it with css classes like this:

component: oh-button
config:
  action: popup
  popupOpen: .myPopupOpen
slots:
  default:
    - component: f7-popup
      config:
        class: myPopupOpen
      slots:
        default:
          - component: oh-label-card
10

Sorry, didn’t got the point :frowning_face: (I’m new to yaml)

I changed my code like this, but it changed nothing:

 - component: oh-link
   config:
     action: popup
     popupOpen: .myPopupOpen
     actionModal: ='page:' + props.page
     style:
       position: absolute
       left: 0px
       top: 0px
       height: 110px
       width: 100%
     slots:
       default:
         - component: f7-popup
           config:
             class: myPopupOpen
           style:
             --f7-popup-tablet-width: 1200px
11

delete this line

12

… and indents are wrong. slot hast to be without indent.
just copy paste my code in the above post

13

Removing the actionModel line did the trick, but then how do I set the target content?

14

see in my example above. your content goes into the default slot. I made the beginning with an oh-label-card item.

15

I have to ask you to have a look at my code. It should open a complete page given via an item. Not a hardcoded layout. Do you think this is possible?

16

the structure is as follows:
just copy all your components from your page to the end of this example

component: oh-button
config:
  action: popup
  popupOpen: .myPopupOpen
slots:
  default:
    - component: f7-popup
      config:
        class: myPopupOpen
      slots:
        default:
          - component: oh-label-card
            config: ...
          - component: oh-label-card
            config: ...
          - component: oh-label-card
            config: ...
          - component: oh-whatever
            config: ...
17

Got that point, but that’s not what I would like to do. This should be a generic card, otherwise I would end with 20 or so popups all doing the same. Hence the link to the other page

18

not tested but then load the page within an f7-popup

component: oh-button
config:
  action: popup
  popupOpen: .myPopupOpen
slots:
  default:
    - component: f7-popup
      config:
        class: myPopupOpen
      slots:
        default:
          - component: page:pageid
19

I tried your suggestion, but the popup is still empty.

20

then copy the content of your page into a widget and embed the widget in your popup
- component: widget:widgetid