OH3: widget:

galexey · February 22, 2021, 1:55pm

Hi!
First things first:
the new UI is amazing and I love the possibilities we get with it.
I´ve spent quite some time learning and trial and error to get my custom widget looking ok.
But now I´m stuck - I´ve spent some hours now on this problem:

I can´t understand why oh-masonry and oh-grid-col mess up the width of my custom widget.

If I just place the widget into the page, everything is fine:
grafik

but as soon as there are more columns or in the oh-masonry with more widgets, I get this:

If I reduce the width of the window even more the masonry then moves one widget to the next row:

I´ve set the min-width but it seems to get ignored.
I´m an absolute rookie with CSS, quite frustrated already and I´m really glad on any hints and suggestions for improvements of my widget.

thanks!

uid: shutter-lamella
tags: []
props:
  parameters:
    - description: The title of the Shutter Lamella
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: the shutteritem
      label: Item
      name: itemShutter
      required: true
      type: TEXT
    - context: item
      description: the Lamellaitem
      label: Lamellaitem
      name: lamella
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Feb 22, 2021, 11:31:48 AM
component: f7-card
config:
  title: =props.title
  style:
    border-radius: 12px
    min-width: 279px
    max-width: 400px
    
slots:
  default:
    - component: f7-row
      config:
        padding: 0px
        margin: 0px
        noGap: true
        style: 
          height: 128px
          min-width: 279px
        
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: 33px
                position: relative
                left: +7px
                top: +3px
                justify-content: center
            slots:
              default:
                - component: f7-row
                  config:
                    padding: 0px
                    margin: 0px
                    style:
                      justify-content: center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: arrowtriangle_up
                          size: 42
                          color: gray
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionItem: =props.itemShutter
                                actionCommand: UP
                                style:
                                  position: absolute
                                  top: 0px
                                  width: 100%
                                  height: 100%
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: stop
                          size: 42
                          color: red
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionItem: =props.itemShutter
                                actionCommand: STOP
                                style:
                                  position: absolute
                                  top: 0px
                                  width: 100%
                                  height: 100%
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: arrowtriangle_down
                          size: 42
                          color: gray
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionItem: =props.itemShutter
                                actionCommand: DOWN
                                style:
                                  position: absolute
                                  top: 0px
                                  width: 100%
                                  height: 100%
          - component: f7-col
            config:
              style:
                width: 130px
                height: 130px
                position: absolute
                left: 45px
                #top: calc(top + 3px)
              padding: 0px
              margin: 0px
              class:
                - justify-content-center
            slots:
              default:
                - component: oh-knob
                  config:
                    item: =props.itemShutter
                    primaryColor: rgb(117, 48, 13)
                    secondaryColor: lightgrey
                    responsive: true
          - component: f7-col
            config:
              style:
                position: absolute
                left: 178px
                min-width: 100px
                width: calc(100% - 178px)
              padding: 0px
              margin: 0px
              class:
                - justify-content-center
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - button
                    style:
                      --f7-button-hover-bg-color: transparent
                      --f7-button-bg-color: transparent
                      height: 32px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 20px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: lamelle-0
                                style:
                                  height: 32px
                                  position: absolute
                                  top: +2px
                                  left: 13px
                      - component: f7-col
                        config:
                          width: 100%
                        slots:
                          default:
                            - component: oh-button
                              config:
                                raised: false
                                round: true
                                outline: true
                                style:
                                  background: '=(items[props.lamella].state > 2) ? "linear-gradient(180deg, rgba(245, 190, 163, 0.0), rgba(245, 190, 163, 0.25))" : ""'
                                  --f7-button-hover-bg-color: rgba(30, 30, 30, 0.2)
                                  --f7-button-border-color: rgb(120, 120, 120)
                                  position: absolute
                                  top: 0
                                  left: 0
                                  height: 32px
                                  width: 100%
                                  z-index: 1
                                action: command
                                actionItem: =props.lamella
                                actionCommand: = "0"
                            - component: Label
                              config:
                                text: OFFEN
                                style:
                                  color: black
                                  font-weight: normal
                                  position: absolute
                                  font-size: 13px
                                  top: -1px
                                  right: 10%
                                  z-index: 0
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 20px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: lamelle-10
                                style:
                                  height: 32px
                                  position: absolute
                                  top: 32px
                                  left: 13px
                      - component: f7-col
                        config:
                          width: 100%
                        slots:
                          default:
                            - component: oh-button
                              config:
                                raised: false
                                round: true
                                outline: true
                                style:
                                  background: '=(items[props.lamella].state > 28) ? "linear-gradient(180deg, rgba(245, 190, 163, 0.25), rgba(245, 190, 163, 0.5))" : ""'
                                  --f7-button-hover-bg-color: rgba(30, 30, 30, 0.2)
                                  --f7-button-border-color: rgb(120, 120, 120)
                                  position: absolute
                                  top: 32px
                                  left: 0
                                  height: 32px
                                  width: 100%
                                  z-index: 1
                                action: command
                                actionItem: =props.lamella
                                actionCommand: = "33"
                            - component: Label
                              config:
                                text: HELL
                                style:
                                  text-align: right
                                  vertical-align: top
                                  color: black
                                  font-weight: normal
                                  font-size: 13px
                                  position: absolute
                                  top: 39px
                                  right: 10%
                                  z-index: 0
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 20px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: lamelle-50
                                style:
                                  height: 32px
                                  position: absolute
                                  top: 64px
                                  left: 13px
                      - component: f7-col
                        config:
                          width: 100%
                        slots:
                          default:
                            - component: oh-button
                              config:
                                raised: false
                                round: true
                                outline: true
                                style:
                                  background: '=(items[props.lamella].state > 60) ? "linear-gradient(180deg, rgba(245, 190, 163, 0.5), rgba(245, 190, 163, 0.75))" : ""'
                                  --f7-button-hover-bg-color: rgba(30, 30, 30, 0.2)
                                  --f7-button-border-color: rgb(120, 120, 120)
                                  position: absolute
                                  top: 64px
                                  left: 0
                                  height: 32px
                                  width: 100%
                                  z-index: 1
                                action: command
                                actionItem: =props.lamella
                                actionCommand: = "66"
                            - component: Label
                              config:
                                text: DUNKEL
                                style:
                                  text-align: right
                                  vertical-align: top
                                  color: black
                                  font-weight: normal
                                  font-size: 13px
                                  position: absolute
                                  top: 71px
                                  right: 10%
                                  z-index: 0
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 20px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: lamelle-100
                                style:
                                  height: 32px
                                  position: absolute
                                  top: 96px
                                  left: 13px
                      - component: f7-col
                        config:
                          width: 100%
                        slots:
                          default:
                            - component: oh-button
                              config:
                                raised: false
                                round: true
                                outline: true
                                style:
                                  background: '=(items[props.lamella].state > 70) ? "linear-gradient(180deg, rgba(245, 190, 163, 0.75), rgba(245, 190, 163, 1))" : ""'
                                  --f7-button-hover-bg-color: rgba(30, 30, 30, 0.2)
                                  --f7-button-border-color: rgb(120, 120, 120)
                                  position: absolute
                                  top: 96px
                                  left: 0
                                  height: 32px
                                  width: 100%
                                  z-index: 1
                                action: command
                                actionItem: =props.lamella
                                actionCommand: = "100"
                            - component: Label
                              config:
                                text: ZU
                                style:
                                  text-align: right
                                  vertical-align: top
                                  color: black
                                  font-weight: normal
                                  font-size: 13px
                                  position: absolute
                                  top: 103px
                                  right: 10%
                                  z-index: 0

Oliver2 · February 23, 2021, 5:16pm

If you want to control the width of your widget I recommend not to go for masonry but block. Within that block add row/columns and define the width via column options

galexey · February 25, 2021, 8:07pm

Thanks Oliver!
I keep learing and started to go for flexboxes. let´s see how far I get with it.

hubsif · February 25, 2021, 8:24pm

From a brief look at the code it seems to me that you have set fixed widths to all your content, e.g. 130px to the knob column.
Now the masonry works like this: For different browser size ranges it shows a certain number of (pre-)defined columns, e.g. for a browser width from 768 to 1023px it shows 4 columns. At 800px and a margin of I think 20px on the browser’s edges and in between elements this leaves a width of 175px for each card.
Your cards’ content simply exceeds that size and with fixed widths set the browser is not allowed to shrink them.

I think you can do two things:

For a start, set your column widths to relative sizes (e.g. 30%) and make their content also fit in relatively
If that’s not enough you can set a (yet undocumented) parameter by editing the yaml code:
With cols it’s possible to adjust the number of columns for each breakpoint. Default in OH3 is:

{default: 5, 1400: 4, 1280: 3, 1023: 4, 768: 3, 576: 2, 480: 1}

(yeah, I also just wondered about that 3 for 1280 )

You can adjust the breakpoints and columns like this:
```
 masonry:
   - component: oh-masonry
     config:
       cols:
         default: 10
         "1280": 7
         "768": 6
         "480": 5
```

hubsif · February 25, 2021, 8:26pm

Ah, and next time you might think about choosing a more meaningful subject for your post

ysc · February 26, 2021, 7:10pm

That’s because at 1024 you start to have the sidebar so when you’re just above that you could end up with less space than when the screen width is just below (and the sidebar is not displayed), like 960.

But these thresholds are a bit wrong, they should probably change. Sometimes the cards are really too narrow.

galexey · March 2, 2021, 4:50pm

Thanks Hubsi!
I´ll try to get it more capable to resize. I saw that I still have to learn more on this topic.