Oh-repeater problem

Hi,

Im playing around with the Main UI to create widgets in the overview page. Till now i have been using the locations tab.

I created a test widget (based on forum examples ). Which displays a popup screen when the paper icon is pressed. There are more toggle buttons , is there a way to display scrollbars or the have scrolling available.

afbeelding

uid: Test
tags: []
timestamp: Jan 3, 2022, 12:51:07 PM
component: f7-card
config:
  swipeToClose: true
  style:
    noShadow: false
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    border-radius: var(--f7-card-expandable-border-radius)
    background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark' ? 'DimGrey' : 'GhostWhite'"
    height: 130px
    width: auto
    max-width: 300px
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: popupDetails
      slots:
        default:
          - component: oh-button
            config:
              iconF7: clear_fill
              iconSize: 30px
              action: popup
              iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
              popupClose: .popupDetails
              style:
                position: absolute
                right: 10px
                top: 10px
                z-index: 998
          - component: f7-card
            config:
              title: Lights
            slots:
              default:
                - component: oh-list
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: item
                          sourceType: itemsWithTags
                          itemTags: Switch,Light
                          listContainer: true
                        slots:
                          default:
                            - component: oh-toggle-item
                              config:
                                icon: '=(items[loop.item.name].state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb"'
                                iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
                                title: =loop.item.label
                                item: =loop.item.name
  default:
    - component: oh-button
      config:
        iconF7: doc_plaintext
        iconSize: 30px
        action: popup
        popupOpen: .popupDetails
        iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
        style:
          padding-bottom: 40px
          padding-right: 5px
          padding-top: 4px
          position: absolute
          right: 5px
          top: 0
          z-index: 998

You just need add overflow-y: scroll to the style section of your popup configuration:

    - component: f7-popup
      config:
        class: popupDetails
        style:
          overflow-y: scroll

Thanks a lot that did the trick. Is there an eleborate overview of all the style options?

There are a number of resources on CSS (but read about CSS classes & variables above too) for instance:

1 Like