Need help for proper adjusting of vertical size within popover-widget

Setup, Configuration and Use Widgets
1

I created my little rollershutter-widget, merely by collecting ideas from others and combining them to a very minimal popover.
It looks like:
image

  • The numbers on the scale work as shortcuts to the positions
  • The slider can move to any position

Now my problem:
The vertical size of the slider never adjusts to the column with the numbers. The goal would be that it is automatically be a little longer than the list of the numbers. Currently I hardcoded the pixels (in the screenshot a little to much to show the effect) but that behaves different on different screens.
It would be great if somebody with more knowledge about flex-boxes, css etc. could have a look and give me a hint how the vertical size of the first column could propagate to the slider.
And maybe one additional question: Can (and how) I avoid scrollbars appearing when the popover exceeds a certain size? If I try to increase the width of the whole widget I get ugly scrollbars (just on some screens).

Here is the code of the widget 
uid: universal_shutter_v6
tags: []
props:
  parameters:
    - description: rollershutter widget
      label: Titel
      name: title
      required: false
      type: TEXT
    - context: item
      description: Rollershutter control (receives UP, DOWN, STOP commands)
      label: Rollershutter control
      name: control
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Dec 25, 2024, 9:55:39 AM
component: f7-card
config:
  style:
    background: rgb(40,40,40)
    margin: 15px
    margin-top: 0px
    #width: 230px
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                display: flex
                height: 180px
                justify-content: left
                margin-top: 10px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: flex-start
                      flex-direction: column
                      width: 50px
                  slots:
                    default:
                      - component: oh-list
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: "10"
                                actionItem: =props.control
                                text: 10%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: "25"
                                actionItem: =props.control
                                text: 25%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: "50"
                                actionItem: =props.control
                                text: 50%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: "75"
                                actionItem: =props.control
                                text: 75%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: "90"
                                actionItem: =props.control
                                text: 90%
                - component: f7-col
                  config:
                    style:
                      height: 100%
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          color: white
                          item: =props.control
                          label: true
                          releaseOnly: true
                          scale: false
                          step: 5
                          style:
                            --f7-range-bar-active-bg-color: linear-gradient(to top, rgba(246,158,81,0),
                              rgba(246,158,81,0.8))
                            --f7-range-bar-bg-color: rgba(246, 158, 81, 0.2)
                            --f7-range-bar-border-radius: 10px
                            --f7-range-bar-size: 18px
                            --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                            --f7-range-knob-size: 20px
                            --f7-range-label-text-color: black
                          vertical: true
                          vertical-reversed: true
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column

                      height: 85%
                      justify-content: center
                      margin-left: 5px
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: UP
                          actionItem: =props.control
                          colorTheme: gray
                          iconF7: arrowtriangle_up
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            border-radius: 15px 15px 0px 0px
                            padding: 10px
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: STOP
                          actionItem: =props.control
                          iconF7: stop
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            padding: 10px
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: DOWN
                          actionItem: =props.control
                          colorTheme: gray
                          iconF7: arrowtriangle_down
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            border-radius: 0px 0px 15px 15px
                            padding: 10px
          - component: oh-button
            config:
              fill: true
              outline: true
              popupClose: .popover
              style:
                margin-left: 10px
                margin-right: 10px
                margin-top: 20px
                justify-content: center
              text: OK
2

Maybe not exactly what you want but pretty close and just a few lines away.
Add this to the oh-slider config:

config:
  max: 100
  scale: true
  scaleSteps: 4
  scaleSubSteps: 2

Personally, I would not try to separate the scale from the slider into its own component.

3

Many thanks for the suggestion. Unfortunately that was where I came from and then I thought the scale numbers should also work as shortcuts and should represent my most commonly needed positions.

My feeling is that the oh-list does not really have a vertical size.
Maybe @JustinG (sorry for the ping. ignore me if in Christmas action) has an idea how to adjust the slider according to the size of the oh-list?

4

From a quick look at what you’ve got, I’d say it is not the slider you want to change. The slider is correctly taking up the whole height of the column it is in. The problem is the first column, and specifically the oh-list. You don’t even want the list here. The column itself can do what you want more easily and better than the list.

I would get rid of the list and set the buttons as direct children of the f7-col. Then you’ll want to set the columns height to 100% so it matches the second column, set the display to flex (the f7-col doesn’t have this as the default display setting), and justify the items to space-around (this will give you the inset at the beginning and end of the button stack).

- component: f7-col
  config:
    style:
      align-items: flex-start
      flex-direction: column
      width: 50px
      height: 100%
      display: flex
      justify-content: space-around
1 Like
5

thank you so much. That’s been it.
I wonder if this layout stuff will ever be anything other than a lottery to me.
If anybody is interested. Here is the my current rollershutter widget with shortcuts, slider and direction-buttons.

rolleshutter-widget 
uid: universal_shutter_v6
tags: []
props:
  parameters:
    - description: rollershutter widget
      label: Titel
      name: title
      required: false
      type: TEXT
    - context: item
      description: Rollershutter control (receives UP, DOWN, STOP commands)
      label: Rollershutter control
      name: control
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Dec 25, 2024, 10:09:20 AM
component: f7-card
config:
  style:
    background: rgb(40,40,40)
    #margin: 15px
    margin-top: 0px
    #display: flex
  title: =props.title
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                display: flex
                height: 160px
                justify-content: left
                margin-top: 10px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: flex-start
                      flex-direction: column
                      width: 50px
                      height: 100%
                      display: flex
                      justify-content: space-around
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: "10"
                          actionItem: =props.control
                          text: 10%
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: "25"
                          actionItem: =props.control
                          text: 25%
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: "50"
                          actionItem: =props.control
                          text: 50%
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: "75"
                          actionItem: =props.control
                          text: 75%
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: "90"
                          actionItem: =props.control
                          text: 90%
                - component: f7-col
                  config:
                    style:
                      height: 100%
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          color: white
                          item: =props.control
                          label: true
                          releaseOnly: true
                          scale: false
                          step: 5
                          style:
                            --f7-range-bar-active-bg-color: linear-gradient(to top, rgba(246,158,81,0),
                              rgba(246,158,81,0.8))
                            --f7-range-bar-bg-color: rgba(246, 158, 81, 0.2)
                            --f7-range-bar-border-radius: 10px
                            --f7-range-bar-size: 18px
                            --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                            --f7-range-knob-size: 20px
                            --f7-range-label-text-color: black
                          vertical: true
                          vertical-reversed: true
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      height: 85%
                      justify-content: center
                      margin-left: 5px
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: UP
                          actionItem: =props.control
                          colorTheme: gray
                          iconF7: arrowtriangle_up
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            border-radius: 15px 15px 0px 0px
                            padding: 10px
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: STOP
                          actionItem: =props.control
                          iconF7: stop
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            padding: 10px
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: DOWN
                          actionItem: =props.control
                          colorTheme: gray
                          iconF7: arrowtriangle_down
                          iconSize: 20
                          style:
                            background-color: rgba(246, 158, 81, 0.2)
                            border-radius: 0px 0px 15px 15px
                            padding: 10px
          - component: oh-button
            config:
              fill: true
              outline: true
              popupClose: .popover
              style:
                margin-left: 10px
                margin-right: 10px
                margin-top: 30px
                justify-content: center
              text: OK

image

1 Like