OH3 Popup match f7-page size

Mark_VG · June 23, 2021, 10:04am

Platform information:

Hardware: _amd64
OS: Windows 10/10.0
Java Runtime Environment: 11.0.9.1 (Zulu11.43+55-CA)
openHAB version: openHAB 3.1.0.M5

Is it possible to make a popup match the defined f7-page size which is being called?

I use the following to open a popup from my Overview page:

component: oh-cell
config:
  title: Blank Popup
  action: popup
  actionModal: widget:Popup_Base
  actionModalConfig: null
slots: null

I have not been able to get the popup to match the f7-page definition. The widget I am calling for test purposes is (removed the “extra” buttons etc to make readability better":

uid: Popup_Base
tags: []
props:
  parameterGroups: []
timestamp: Jun 23, 2021, 11:35:29 AM
component: f7-page
config:
  style:
    position: absolute
    left: 0px
    top: 0px
    background-color: rgb(220,220,220)
    --f7-card-margin-horizontal: 0px
    border-radius: 20px
    width: 358px
    height: 410px

The result is (on a PC Browser (Chrome):

The issues I have:

The popup size is larger (in this case) than the defined page - leaving all the surrounding space.
The NAV bar overlaps the actual page - have tried the options to hide the NAV bar - but don’t get any workable results:

   - component: f7-page
     config:
       style:
         z-index: 0
         --f7-navbar-height: 0px
         --f7-navbar-font-size: 0px
         --f7-navbar-bg-color: white
         --f7-navbar-border-color: white
         --f7-navbar-link-color: black
         --f7-navbar-text-color: black

The above style options produce:

uid: Popup_Base
tags: []
props:
  parameterGroups: []
timestamp: Jun 23, 2021, 11:52:49 AM
component: f7-page
config:
  style:
    z-index: 0
    --f7-navbar-height: 0px
    --f7-navbar-font-size: 0px
    --f7-navbar-bg-color: white
    --f7-navbar-border-color: white
    --f7-navbar-link-color: black
    --f7-navbar-text-color: black
    position: absolute
    left: 0px
    top: 0px
    background-color: rgb(220,220,220)
    --f7-card-margin-horizontal: 0px
    border-radius: 20px
    width: 358px
    height: 410px

And adjusting the position:

    position: absolute
    left: 0px
    top: 50px

Can’t seem to find a “prefect” solution.

Ideally I would like:
Popup4

Any suggestions on what else to try - or if this is possible?

Thanks for your feedback.
Mark

Mark_VG · June 24, 2021, 11:04am

So seems this can’t be done?

Not sure how to achieve what I am looking for then. Will have to keep trying…

ubeaut · June 24, 2021, 11:08am

What if you change it to this:

width: 100%
height: 100%

Mark_VG · June 24, 2021, 11:18am

I specified the size in px to take full advantage of what is displayed on my mobile etc. There are buttons etc on the widget that I need to layout and position.

Can achieve similar effect with popover, but prefer the popup option - except for the “wasted” space in the popup “window”.

Will have to do MUCH more research I think.

Managed to get a “workable” popup solution, in full as below:

Managed to get rid of the NAV Bar etc.

ubeaut · June 24, 2021, 11:24am

Looks like a good widget.
I have only manged to a a few small remotes so far.
I used popover because of the same reason…the wasted space.
Good luck finding a solution.
Post it here if you find it.

ubeaut · June 24, 2021, 11:45pm

What would happen if you changed all the button positions to % instead of px?
I wonder if the whole thing would scale?

Mark_VG · June 25, 2021, 5:25am

Hi Greg
Yes, I spent a couple of hours after your suggestion trying that (I did not change EVERYTHING to %, just position. Sizes etc have been left as px:

New Widget

Definitely more scalable, though there are limits:

The alignment can look perfect on the preview - but very different on the end device
There is still all the “wasted” space at the bottom. The whole layout looks wrong if I try and fill that - especially since trying to look similar to the NX-148E keypad.
The landscape vie on a mobile is completely wrong, even though the portrait view is fine:

Work in progress… So will keep at it.

ubeaut · June 25, 2021, 5:33am

I am impressed it even worked.
So it sort of worked.

ubeaut · June 26, 2021, 1:00am

What happens if everything was in %?
The buttons etc.
Do you think it would scale even better?

Mark_VG · June 26, 2021, 8:06am

Hi Greg

Did a quick test - modified the UP ARROW, DOWN ARROW, ARMED, READY, FIRE and POWER components,

As you can see now much difference. I was also not able to get the border-radius to match either.
All Percentage
So in my case I don’t think it is worth the effort

Cheers
Mark

ubeaut · June 26, 2021, 8:08am

Oh well at least we know it sort of works.
Thanks for trying.