Custom widget - Position of columns and rows

Hi all,
I’m really new to this topic, so please forgive my bad knowledge.
I tried to read to understand the collaboration of the cols and rows and the order and position of these items, without solution.
Can some help me?


I have following issues:

  • move “f7-segmented” under oh-trend chart
  • move the row with the 3 columns with slider, stepper and label under the oh-trend chart to bottom
  • expand the oh trend chart to complete width
  • bring the labels “Büro” and “Ergeschoss” closer to the icon (move left)

I would really like to understand how that works, to be able to create beautiful widget to share them with the community :slight_smile: So if I have a complete wrong appraoch, please tell me

uid: Thermostat-Control-Test
tags: []
props:
  parameters:
    - description: Beschriftung des Raums
      label: Raum Beschriftung
      name: roomName
      required: false
      type: TEXT
    - description: Beschriftung der Etage
      label: Etagen Beschriftung
      name: floorName
      required: false
      type: TEXT
    - context: item
      description: Ist-Temperatur des Raums, gemessen durch einen Sensor
      label: Ist-Temperatur
      name: itemTemperaturIst
      required: false
      type: TEXT
    - context: item
      description: Item des Sollwerts, welches im Widget eingestellt werden soll
      label: Heizung Sollwert
      name: itemTemperaturSollwert
      required: false
      type: TEXT
    - context: item
      description: Item des aktuellen Solwerts, welches vom Heizungsaktor gemeldet wird
      label: Heizung Sollwert
      name: itemTemperaturSollwertAktuell
      required: false
      type: TEXT
    - context: item
      description: Item des Stellwerts des Heizungsventils
      label: Item
      name: itemStellwertStatus
      required: false
      type: TEXT
    - context: item
      description: Betriebsart
      label: Item
      name: itemBetriebsart
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 13, 2021, 11:27:59 AM
component: f7-card
config:
  style:
    max-height: 400px
    background-color: rgb(57,60,76)
    border-radius: 15px
    overflow: hidden
    position: relative
    noShadow: false
    height: 20em
    min-width: 20em
    max-width: 100%
slots:
  default:
    - component: f7-card-content
      config:
        style:
          height: 70px
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 50px
            slots:
              default:
                - component: f7-col
                  config:
                    width: 5
                    style:
                      height: 100%
                      display: flex
                      justify-content: center
                      align-items: center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          color: white
                          size: 25px
                - component: f7-col
                  config:
                    width: "75"
                    style:
                      height: 100%
                  slots:
                    default:
                      - component: Label
                        config:
                          propsParameterGroup: header
                          text: Büro
                          style:
                            white-space: nowrap
                            text-overflow: ellipsis
                            overflow: hidden
                            display: block
                            color: white
                            letter-spacing: .75px
                            font-size: min(max(14px, 4vw), 21px)
                            font-weight: 600
                      - component: Label
                        config:
                          actionPropsParameterGroup: header
                          text: Erdgeschoss
                          style:
                            white-space: nowrap
                            text-overflow: ellipsis
                            overflow: hidden
                            color: white
                            letter-spacing: .75px
                            font-size: min(max(9px, 2.5vw), 12px)
                - component: f7-col
                  config:
                    width: "20"
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-chip
                        config:
                          bgColor: '=(Number.parseFloat(items[props.itemStellwertStatus].state.split(" ")[0]) > 0) ? "orange" : "green"'
                          text: =(Number.parseFloat(items[props.itemStellwertStatus].state.split(" ")[0]) * 100) + ' %'
                          iconF7: logo_apple
                          iconColor: white
                          style:
                            font-size: min(max(14px, 4vw), 18px)
                            color: white
                            border-radius: 25px 25px 25px 25px
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: White
                      display: flex
                      justify-content: center
                      align-items: center
                      height: 150px
                  slots:
                    default:
                      - component: oh-trend
                        config:
                          trendItem: =[props.itemTemperaturIst]
                          style:
                            --f7-theme-color-bg-color: transparent
                            background: var(--f7-theme-color-bg-color)
                            filter: opacity(30%)
                            width: 100%
                            height: 150px
                            z-index: 1
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: gray
                  slots:
                    default:
                      - component: f7-segmented
                        config:
                          raised: false
                          round: false
                          strong: true
                        slots:
                          default:
                            - component: oh-button
                              config:
                                text: Ein
                                actionItem: =(props.itemBetriebsart)
                                actionCommand: Komfort
                                action: command
                                active: =(items[props.itemBetriebsart].state === 'Komfort')
                            - component: oh-button
                              config:
                                text: Nacht
                                actionItem: =(props.itemBetriebsart)
                                actionCommand: Nacht
                                action: command
                                active: =(items[props.itemBetriebsart].state === 'Nacht')
                            - component: oh-button
                              config:
                                text: Aus
                                actionItem: =(props.itemBetriebsart)
                                actionCommand: Frostschutz
                                action: command
                                active: =(items[props.itemBetriebsart].state === 'Frostschutz')
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: gray
                  slots:
                    default:
                      - component: oh-stepper
                        config:
                          item: =props.itemTemperaturSollwert
                          raised: true
                          buttonsOnly: true
                          small: true
                          min: 19
                          max: 25
                          step: 0.5
                          color: white
                          style:
                            align-self: flex-end
                            list-style-type: none
                - component: f7-col
                  config:
                    style:
                      background: gray
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          step: 0.5
                          min: 19
                          max: 25
                          item: =props.itemTemperaturSollwert
                          style:
                            align-self: flex-end
                            margin-left: 15px
                            font-color: yellow
                - component: f7-col
                  config:
                    style:
                      background: gray
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =(Number.parseFloat(items[props.itemTemperaturSollwert].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
                          style:
                            font-size: 25px
                            font-weight: 500
                            margin-left: 15px
                            margin-top: 0px
                            color: white

within your card you have 4 table rows. to change order (move up) you have to copy paste the desired row with all their cols to the desired position

in order to bring labels closer to the value you have right align the container (cols)

oh-trend: what happens if you delete height from cols and oh-trend?

instead of
–f7-theme-color-bg-color: transparent
background: var(–f7-theme-color-bg-color)

simple write:
background: transparent

Hi all,
I didn’t know that the rows dond’t work like html rows, so a row will be placed under a row. Nevertheless I adjusted it and I only worked with absolute positions, not really responsive but I like the visual result:
image
I have still one issue: The cards have a collision in the middle with the next card, if the screen isn’t big enough. Why is that?

uid: Thermostat-Control-Test
tags: []
props:
  parameters:
    - description: Beschriftung des Raums
      label: Raum Beschriftung
      name: roomName
      required: false
      type: TEXT
    - description: Beschriftung der Etage
      label: Etagen Beschriftung
      name: floorName
      required: false
      type: TEXT
    - context: item
      description: Ist-Temperatur des Raums, gemessen durch einen Sensor
      label: Ist-Temperatur
      name: itemTemperaturIst
      required: false
      type: TEXT
    - context: item
      description: Item des Sollwerts, welches im Widget eingestellt werden soll
      label: Heizung Sollwert
      name: itemTemperaturSollwert
      required: false
      type: TEXT
    - context: item
      description: Item des aktuellen Solwerts, welches vom Heizungsaktor gemeldet wird
      label: Heizung Sollwert
      name: itemTemperaturSollwertAktuell
      required: false
      type: TEXT
    - context: item
      description: Item des Stellwerts des Heizungsventils
      label: Item
      name: itemStellwertStatus
      required: false
      type: TEXT
    - context: item
      description: Betriebsart
      label: Item
      name: itemBetriebsart
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 15, 2021, 1:32:50 PM
component: f7-block
config:
  style:
    - width: 375px
    - height: 240px
    - border-radius: 20px
    - background-color: rgb(234,234,234)
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: =props.roomName
                    style:
                      position: absolute
                      left: 20px
                      top: 5px
                      fontSize: 20px
                      fontWeight: 700
                      letter-spacing: .75px
                      color: rgb(100,100,100)
                - component: Label
                  config:
                    text: =props.floorName
                    style:
                      position: absolute
                      left: 20px
                      top: 30px
                      fontSize: 12px
                      fontWeight: 500
                      letter-spacing: .75px
                      color: rgb(100,100,100)
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: chart_bar_alt_fill
                    size: 30
                    style:
                      position: absolute
                      left: 320px
                      top: 6px
                      color: rgb(100,100,100)
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 45px
                      background: transparent
          - component: f7-row
            config:
              style:
                justifyContent: center
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: thermometer
                    size: 40
                    style:
                      position: absolute
                      left: 85px
                      top: 80px
                      color: rgb(5,203,216)
                - component: Label
                  config:
                    text: =(Number.parseFloat(items[props.itemTemperaturIst].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
                    style:
                      position: relative
                      top: 40px
                      fontSize: 40px
                      fontWeight: 400
                      color: rgb(5,203,216)
                - component: Label
                  config:
                    text: ='Soll ' + (Number.parseFloat(items[props.itemTemperaturSollwertAktuell].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
                    style:
                      position: absolute
                      top: 100px
                      fontSize: 20px
                      fontWeight: 500
                      color: rgb(5,203,216)
          - component: f7-row
            slots:
              default:
                - component: oh-trend
                  config:
                    trendItem: =props.itemTemperaturIst
                    trendGradient:
                      - "#365175"
                      - "#365175"
                    style:
                      position: absolute
                      left: 4px
                      top: 0px
                      width: 355px
                      height: 190px
                      strokeWidth: 2px
                      z-index: 1
          - component: f7-row
            config:
              style:
                justifyContent: center
            slots:
              default:
                - component: f7-segmented
                  config:
                    raised: false
                    round: false
                    strong: true
                    style:
                      top: 80px
                      width: 500px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          text: EIN
                          actionItem: =(props.itemBetriebsart)
                          actionCommand: Komfort
                          action: command
                          active: =(items[props.itemBetriebsart].state === 'Komfort')
                      - component: oh-button
                        config:
                          text: Nacht
                          actionItem: =(props.itemBetriebsart)
                          actionCommand: Nacht
                          action: command
                          active: =(items[props.itemBetriebsart].state === 'Nacht')
                      - component: oh-button
                        config:
                          text: Aus
                          actionItem: =(props.itemBetriebsart)
                          actionCommand: Frostschutz
                          action: command
                          active: =(items[props.itemBetriebsart].state === 'Frostschutz')
          - component: f7-row
            slots:
              default:
                - component: oh-stepper
                  config:
                    item: =props.itemTemperaturSollwert
                    raised: true
                    buttonsOnly: true
                    small: true
                    min: 19
                    max: 25
                    step: 0.5
                    color: rgb(100,100,100)
                    style:
                      position: absolute
                      top: 203px
                      left: 19px
                      align-self: flex-end
                      list-style-type: none
                - component: oh-slider
                  config:
                    step: 0.5
                    min: 19
                    max: 25
                    item: =props.itemTemperaturSollwert
                    style:
                      position: absolute
                      top: 205px
                      left: 100px
                      width: 180px
                      align-self: flex-end
                      margin-left: 15px
                - component: Label
                  config:
                    text: =(Number.parseFloat(items[props.itemTemperaturSollwert].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
                    style:
                      position: absolute
                      top: 197px
                      left: 305px
                      font-size: 22px
                      font-weight: 500
                      color: rgb(100,100,100)

what do you mean with

if you are using rows/columns in your responsive page layout make sure to set the column options to the correct percentage. if your screen ist 1200px wide, you can“t go below30% because your widget has a fixed size of 375px which means you can only have 3 widgets per row

I haven’t configured columns. I have set several sets in a Block. On smaller screens it splits the cells to multiple lines, but it seems that the width of the column isn’t calculated correctly. One Widget is shown half above the other and after that we have the Break. The expected result would be to have the Widgets next to each other and If it doesn’t fit in the Line, it should break

Hi Jan!

Actually, a very nice widget! Though, I think there are two issues here:

  1. main issue: fixed width widget
    IMHO widgets are not meant to have a fixed width for the sake of responsiveness. Even if set properly to show one widget per row (instead of two in your screenshot example) (see 2.), the widget is meant to be scaled to the screen width. This is not possible with the fixed width set in your widget. So, I’d suggest to migrate it to relative widths.
  2. number of columns
    You can adjust the number of columns that are shown for certain screen widths. You might want to have a look at the docs on how to do this.

in addition to that if you use an f7-card as a basis instead of a block, you can set some margins horizontal and vertical that will help you with the positioning vs. other widgets:

style:
  --f7-card-margin-horizontal: 5px
  --f7-card-margin-vertical: 10px

if i am not mistaken, these are the default margins that are being used with oh-cells ( but dont quote me ), atleast my f7-card widgets do have the same margin if i mix them with oh-label-cells. But definitely you need to re-structure your widgets for a more responsive behaviour first of all.

Thanks for update and quick reply. I’ll be sure to keep an eye on this thread. Looking for the same info.

myaarpmedicare