Difficulties getting a simple widget with Grid to work

Setup, Configuration and Use Widgets
,
1

I am a bit struggling with grid layout during my first attempt to create a widget.
Maybe someone can tell me what’s wrong with the following piece of code.

It only displays (in the same order)
“card title”
“card footer”
< the dimmer slider>

I would have expected the other texts as well and the dimmer slider in between the header and the footer.

uid: widget_grid_test
component: f7-card
config:
  title: 'card title'
  footer:  'card footer'
slots:
  default:
   - component: f7-block
     config:
       title: 'Block title'
     slots: 
         default:
           - component: f7-row
             config:
               title: 'Row title'
             slots:
               default:
                 - component: oh-slider
                 - component: f7-row
                   slots: 
                     default:
                       - component: label
                         config: 
                           text: "Label text"
masonry: []
2

Because of the way that OH adds components, you’ll get better control if you use the various f7 card components than the built properties. So, in this case, I would replace your f7-block with a f7-card-content and instead of using the card’s footer property, add a f7-card-footer component as well…

component: f7-card
config:
  title: 'card title'
slots:
  default:
    - component: f7-card-content
      ...content components here...
    - component: f7-card-footer
      slots:
        default:
          - component: Label
            config:
              text: footer text here
3

@JustinG
Thanks for your help, now got something working within a few minutes :smiley: