Expandable widgets in fixed canvas layout

Hi there,
I think the fixed canvas layout is really great as an alternative to Habpanel.
I just don’t understand what to set in expandable widgets so that they don’t obscure each other when expanding.

Since there is probably no solution to this, I changed the expanding of the widget to a popup.
This solves the blurring and overlapping problem, but I have a different problem. The popup cannot be seen in full screen mode.

uid: Shelly 1
tags: []
props:
  parameters:
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - context: item
      description: select item for state switch1
      label: Item
      name: switch
      required: false
      type: TEXT
    - context: item
      description: select item for state power etc.
      label: Item
      name: value
      required: false
      type: TEXT
    - context: item
      description: select item for state wifi
      label: Item
      name: status_wifi
      required: false
      type: TEXT
    - context: item
      description: select item for state battery
      label: Item
      name: status_batt
      required: false
      type: TEXT
    - context: item
      description: select item for state time
      label: Item
      name: status_time
      required: false
      type: TEXT
    - context: item
      description: select groupitem for expant
      label: Item
      name: itemGroup
      required: false
      type: TEXT
timestamp: Nov 14, 2021, 9:29:21 AM
component: f7-card
config:
  style:
    border: 5px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 120px
    margin: 5px
    margin-top: 10px
    min-width: 250px
  swipeToClose: true
slots:
  content:
    - component: f7-block
      config:
        style:
          left: 20px
          position: absolute
          top: -5px
          width: 100%
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 15px
                font-weight: 600
                margin-left: 5px
                margin-top: -3px
                text-align: center
              text: "=props.text_header ? props.text_header : 'Shelly 1 etc'"
          - component: oh-button
            config:
              action: command
              actionCommand: "=(items[props.switch].state === 'OFF') ? 'ON' : 'OFF' "
              actionItem: =props.switch
              iconF7: power
              iconSize: 35
              style:
                background: "=themeOptions.dark === 'dark' ? 'linear-gradient(360deg, #222222 10%, #eeeeee 360%)' : 'linear-gradient(360deg, #5e5e5e 10%, #c6e2ff 200%)'"
                border-radius: 15px
                box-shadow: 0px 4px 7px
                color: "=(items[props.switch].state === 'ON') ? 'red' : 'green' "
                height: 54px
                left: 20px
                padding-top: 10px
                position: absolute
                top: 4px
                z-index: 0
          - component: Label
            config:
              style:
                color: "=themeOptions.dark === 'dark' ? 'orange' : 'orange'"
                font-size: 30px
                font-weight: 600
                left: 100px
                overflow: hidden
                position: absolute
                top: 30px
                white-space: nowrap
              text: =(items[props.value].state)
              visible: "=props.value ? true : false"
          - component: oh-link
            config:
              badgeColor: "=(items[props.status_wifi].state >= '3' ) ? 'green' : (items[props.status_wifi].state >= '1' ) ? 'yellow' : 'red' "
              iconBadge: "=(items[props.status_wifi].state > '0') ? items[props.status_wifi].state : ''"
              iconColor: "=(items[props.status_wifi].state >= '3' ) ? 'green' : (items[props.status_wifi].state >= '1' ) ? 'yellow' : 'red' "
              iconF7: "=(items[props.status_wifi].state >= '1' ) ? 'wifi' : 'wifi_slash' "
              iconSize: 20
              style:
                left: 20px
                position: absolute
                top: 85px
              visible: "=props.status_wifi ? true : false"
          - component: oh-link
            config:
              iconColor: "=(Number.parseFloat(items[props.status_batt].state) >= '50' ) ? 'green' : 'red' "
              iconF7: "=(Number.parseFloat(items[props.status_batt].state) >= '80') ? 'battery_100' : 'battery_25' "
              iconSize: 20
              style:
                left: 65px
                position: absolute
                top: 85px
              visible: "=props.status_batt ? true : false"
          - component: Label
            config:
              style:
                color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
                font-size: 12px
                left: 90px
                overflow: hidden
                position: absolute
                top: 85px
                white-space: nowrap
              text: =(items[props.status_batt].state+"%")
              visible: "=props.status_batt ? true : false"
          - component: oh-link
            config:
              iconColor: yellow
              iconF7: "=(items[props.status_time].state === 'ON') ? 'timer' : ''"
              iconSize: 20
              style:
                left: 120px
                position: absolute
                top: 85px
              visible: "=props.status_time ? true : false"
    - component: f7-popup
      config:
        class: ='myPopupShelly1' + props.itemGroup
        style:
          height: 320px
          background-color: rgba(30,30,30,0.5)
          border-radius: var(--f7-card-expandable-border-radius)
          box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
      slots:
        default:
          - component: oh-list
            slots:
              default:
                - component: oh-repeater
                  config:
                    filter: '(loop.item.type=="Switch") ? true : false'
                    for: item
                    groupItem: =props.itemGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-toggle-item
                        config:
                          icon: =loop.item.category
                          iconUseState: true
                          item: =loop.item.name
                          title: =loop.item.label
                - component: oh-repeater
                  config:
                    filter: '(loop.item.type=="Switch") ? false : true'
                    for: item
                    groupItem: =props.itemGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          icon: =loop.item.category
                          iconUseState: true
                          item: =loop.item.name
                          title: =loop.item.label
  default:
    - component: oh-button
      config:
        color: gray
        iconF7: doc_plaintext
        iconSize: 20px
        action: popup
        popupOpen: ='.myPopupShelly1' + props.itemGroup
        style:
          padding-bottom: 40px
          padding-right: 5px
          padding-top: 4px
          position: absolute
          right: 5px
          top: 0
          z-index: 998

Add this to your f7-popup config section:

tabletFullscreen: true

Unfortunately, that doesn’t solve the problem either, the popup is not displayed on the PC in the browser in full screen mode.

probably because of this:

height: 320px

If I use that, I get a popup in full screen in the normal view, which I cannot close.

But my problem is that I don’t see the popup in full screen mode. When the full screen mode exits, it’s there. That seems to have something to do with the z-index. but my trying with it didn’t get me any further either.
thx

don‘t kniw what you mean. do yoou have screenshots?

english is not my mother tongue, maybe the google translator doesn’t get my question across correctly.
The first picture shows the full screen mode, the button for the popup was pressed, but it cannot be seen.
In the second picture, the full screen mode was simply exited and the popup can be seen.
The only problem is with the canvas layout, which is the only alternative to habpanel.
thx

could you try this widget and post a screenshot from the result?
In “run mode” the popup covers the complete visible area.

uid: Test
tags: []
timestamp: Nov 18, 2021, 7:17:04 PM
component: f7-card
config:
  style:
    border: 5px
    border-radius: var(--f7-card-expandable-border-radius)
    height: 120px
    margin: 5px
    margin-top: 10px
    min-width: 250px
  swipeToClose: true
slots:
  content:
    - component: f7-block
      config:
        style:
          left: 20px
          position: absolute
          top: -5px
          width: 100%
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 15px
                font-weight: 600
                margin-left: 5px
                margin-top: -3px
                text-align: center
              text: Test
    - component: f7-popup
      config:
        class: myPopupShelly1
        tabletFullscreen: true

      slots:
        default:
          - component: oh-button
            config:
              iconF7: clear_fill
              iconSize: 20px
              action: popup
              popupClose: .myPopupShelly1
              style:
                position: absolute
                right: 10px
                top: 10px
                z-index: 998
  default:
    - component: oh-button
      config:
        color: gray
        iconF7: doc_plaintext
        iconSize: 20px
        action: popup
        popupOpen: .myPopupShelly1
        style:
          padding-bottom: 40px
          padding-right: 5px
          padding-top: 4px
          position: absolute
          right: 5px
          top: 0
          z-index: 998
1 Like

Thank you for your efforts.
But we talk past each other.
It’s not about having the popup in full screen, but rather seeing the popup when the page is in full screen mode.

as written, could you post a screenshot with the widget I provided?

popup in normal view

and when the page is in full screen mode

hmm, working on my side…
I tested with “responsive layout”
then “Run mode” → “Fullscreen”


is this your popup?
image

image

full frame then herewith

ok, I can reproduce this.
Intersting enough, if you go into fullscreen mode by clicking on “Fullscreen” instead of the two arrows, everything is working fine.
probably a bug.

The point “full screen” is only available in the edit mode, in the normal view it is not there, so only the double arrow remains.

@hubsif: Hi Hubsi, are you the author of Fixed Canvas layout?
Could you please have look if this is a bug or maybe other additional parameters are being required?

I was hoping that my problem with OH 3.2 M5 would be fixed, but unfortunately not.

When I switch to full screen mode with the double arrows in the top right corner, it doesn’t work. But when editing in “run mode” via the setting image at the bottom left it works.
What is the difference ??

I have also this problem. Is that supposed to work like this and if yes why? If you build a page with fixed canvas,in full screen the popups don’t come on. In fixed grid you have some more options when you go to configure grid layout. Like , Hide navigation bar, show full screen icon.

I will appreciate if someone answer.