OH3 Enable Scroll on f7-page using f7-list

Mark_VG · December 19, 2021, 5:58pm

Platform information:
- Hardware: amd64
- OS: Windows 10/10.0 (amd64)
- Java Runtime Environment: 11.0.12 (Zulu11.50+19-CA)
- openHAB version: openHAB 3.2.0.M4

Hi All

On my Overview I have an oh-cell with an f7-page with a f7-list.
My list has however gotten too long for the popup when I click on the oh-cell in Overview - so is getting truncated as I cannot find how to allow scrolling:

There should be 5 x Michael’s Phone X in the list.

My Code is as follows:

component: oh-cell
config:
  color: '=(items.GPSMarkatHome.state === "ON") ? "green" :
    (items.GPSRileyatHome.state === "OFF") ? "green" :
    (items.GPSEthanatHome.state === "OFF") ? "green" : "red"'
  on: true
  title: Presence
slots:
  default:
    - component: f7-page
      config:
        style:
          --f7-navbar-bg-color: white
          --f7-navbar-border-color: white
          --f7-navbar-font-size: 0px
          --f7-navbar-height: 0px
          --f7-navbar-link-color: black
          --f7-navbar-text-color: black
          z-index: 0
      slots:
        default:
          - component: f7-list
            config:
              class:
                - padding-bottom
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-weight: 500
                      line-height: 20px
                      padding-left: 20px
                    text: Mackeurtan Ave
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMarkatHome.state === "OFF") ? "red" :
                      (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMarkatHome.state === "OFF") ? "red" :
                      (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"'
                    iconUsesState: true
                    item: GPSMarkatHome
                    title: Mark's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMarkatHome.state === "OFF") ? "red" :
                              (items.GPSMarkatHome.state === "ON") ? "green" :
                              "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMarkatHome.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSRileyatHome.state === "OFF") ? "red" :
                      (items.GPSRileyatHome.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSRileyatHome.state === "OFF") ? "red" :
                      (items.GPSRileyatHome.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSRileyatHome
                    title: Riley's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSRileyatHome.state === "OFF") ? "red" :
                              (items.GPSRileyatHome.state === "ON") ? "green" :
                              "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSRileyatHome.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSEthanatHome.state === "OFF") ? "red" :
                      (items.GPSEthanatHome.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSEthanatHome.state === "OFF") ? "red" :
                      (items.GPSEthanatHome.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSEthanatHome
                    title: Ethan's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSEthanatHome.state === "OFF") ? "red" :
                              (items.GPSEthanatHome.state === "ON") ? "green" :
                              "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSEthanatHome.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSAnneatHome.state === "OFF") ? "red" :
                      (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSAnneatHome.state === "OFF") ? "red" :
                      (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"'
                    iconUsesState: true
                    item: GPSAnneatHome
                    title: Anne's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSAnneatHome.state === "OFF") ? "red" :
                              (items.GPSAnneatHome.state === "ON") ? "green" :
                              "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSAnneatHome.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHome.state === "OFF") ? "red" :
                      (items.GPSMichaelatHome.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHome.state === "OFF") ? "red" :
                      (items.GPSMichaelatHome.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHome
                    title: Michael's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHome.state === "OFF") ? "red" :
                              (items.GPSMichaelatHome.state === "ON") ? "green"
                              : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHome.displayState)
                - component: Label
                  config:
                    style:
                      font-weight: 500
                      line-height: 20px
                      padding-left: 20px
                    text: Meadow Lane
                - component: oh-list-item
                  config:
                    color: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" :
                      (items.GPSAnneatMeadow.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" :
                      (items.GPSAnneatMeadow.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSAnneatMeadow
                    title: Anne's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" :
                              (items.GPSAnneatMeadow.state === "ON") ? "green" :
                              "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSAnneatMeadow.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" :
                      (items.GPSMichaelatMeadow.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" :
                      (items.GPSMichaelatMeadow.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatMeadow
                    title: Michael's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" :
                              (items.GPSMichaelatMeadow.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatMeadow.displayState)
                - component: Label
                  config:
                    style:
                      font-weight: 500
                      line-height: 20px
                      padding-left: 20px
                    text: Wilden
                - component: oh-list-item
                  config:
                    color: '=(items.GPSRileyatWilden.state === "OFF") ? "red" :
                      (items.GPSRileyatWilden.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSRileyatWilden.state === "OFF") ? "red" :
                      (items.GPSRileyatWilden.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSRileyatWilden
                    title: Riley's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSRileyatWilden.state === "OFF") ? "red" :
                              (items.GPSRileyatWilden.state === "ON") ? "green"
                              : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSRileyatWilden.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSEthanatWilden.state === "OFF") ? "red" :
                      (items.GPSEthanatWilden.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSEthanatWilden.state === "OFF") ? "red" :
                      (items.GPSEthanatWilden.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSEthanatWilden
                    title: Ethan's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSEthanatWilden.state === "OFF") ? "red" :
                              (items.GPSEthanatWilden.state === "ON") ? "green"
                              : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSEthanatWilden.displayState)
                - component: Label
                  config:
                    style:
                      font-weight: 500
                      line-height: 20px
                      padding-left: 20px
                    text: Hoylake Drive
                - component: oh-list-item
                  config:
                    color: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" :
                      (items.GPSAnneatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" :
                      (items.GPSAnneatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSAnneatHoylake
                    title: Anne's Phone
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" :
                              (items.GPSAnneatHoylake.state === "ON") ? "green"
                              : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSAnneatHoylake.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHoylake
                    title: Michael's Phone 1
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                              (items.GPSMichaelatHoylake.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHoylake.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHoylake
                    title: Michael's Phone 2
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                              (items.GPSMichaelatHoylake.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHoylake.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHoylake
                    title: Michael's Phone 3
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                              (items.GPSMichaelatHoylake.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHoylake.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHoylake
                    title: Michael's Phone 4
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                              (items.GPSMichaelatHoylake.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHoylake.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHoylake
                    title: Michael's Phone 4
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                              (items.GPSMichaelatHoylake.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHoylake.displayState)
                - component: oh-list-item
                  config:
                    color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    icon: f7:person_circle
                    iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                      (items.GPSMichaelatHoylake.state === "ON") ? "green" :
                      "yellow"'
                    iconUsesState: true
                    item: GPSMichaelatHoylake
                    title: Michael's Phone 5
                  slots:
                    after:
                      - component: Label
                        config:
                          style:
                            color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" :
                              (items.GPSMichaelatHoylake.state === "ON") ?
                              "green" : "yellow"'
                            font-weight: 500
                            line-height: 20px
                            padding-right: 20px
                          text: =(items.GPSMichaelatHoylake.displayState)

Any suggestion son how I can get a scroll function?

Thanks
Mark

JustinG · December 19, 2021, 7:55pm

I think you just need to add:

overflow-y: scroll

to the style section of the f7-page

Mark_VG · December 20, 2021, 5:39am

Thanks Justin. No luck. Adds the scroll bars on a PC (but does not scroll), but nothing on a Tablet

JustinG · December 20, 2021, 5:02pm

Sorry, I missed that the f7-page was inside a cell. This is what’s causing the problem. Cell contents will automatically scroll but the f7-page, I think, is interfering with that. Just take the f7-page out and put the list directly in the cell contents.

Mark_VG · December 20, 2021, 7:10pm

Thanks Justin. Will give it a try. But there was a reason we used the f7 page. I think you helped me… memory a bit faded.

Will feedback

Mark_VG · December 21, 2021, 12:15pm

Hey Justin

Just tried removing the f7-page and left just the f7-cell. Nothing happens when I click on the cell now?

Any other ideas?

Thanks
Mark

JustinG · December 21, 2021, 4:47pm

Hmm…that’s strange. This simple demo:

component: oh-cell
config:
  title: Scroll Test
slots:
  default:
    - component: oh-list
      config:
        virtualList: true
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              sourceType: itemsWithTags
              itemTags: ,
              fragment: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: =loop.item.label

Produces this for me:
cell_list

Mark_VG · December 22, 2021, 8:59am

Thanks again Justin. I must have messed up the alignment etc again. I have managed to use my items etc in your example. Scrolls perfectly etc now.

I now just have two aesthetic issues that seem to result from not using the f7-page component:

vs

To match up with my existing Cells etc I would prefer the oh-cell title not be displayed on the list and that the full width of the “popup” be used.

I have tried to use the developer tools in chrome to see if there are any setting s I can adjust, but I cannot seem to access the actual popup etc - gets fuzzed out:

I would appreciate any other suggestions you may have.

JustinG · December 23, 2021, 12:44am

Unfortunately, I don’t have any great suggestions. That may be why you had to resort to the f7-page previously. Oh-cells are pretty locked down configuration-wise. I believe the cells are set to an absolute 650px or thereabouts, so you can just set the width of your list items to a similar appropriate pixel value. If you want much more control than that you may have to recreate the cell from the basic expandable f7-card.