[SOLVED] OH3 widgets - oh-rollershutter-card in f7-card with expandable: true

Setup, Configuration and Use Items & Sitemaps
1

Hi everyone,

I am not quite sure, what I am missing here.
I did some OH3 widgets. In one I tried to integrate an oh-rollershutter-card component into a f7-card component.
If the card is expandable, the rollershutter card won’t show up.

If I comment the line “expandable: true” the rollershutter card shows up. → “#expandable: true”

I made a very simple example widget:

uid: test123
timestamp: May 5, 2021, 9:42:15 PM
component: f7-card
config:
  expandable: true
slots:
  default:
    - component: oh-rollershutter-card
      config:
        item: test_item

Is there a reason for that behavior?
Of course, I could create my own buttons as a workaround. But I’d like to understand. :slight_smile:

2

I know that the f7 docs say that default slot for cards should be the content slot, but I think there have been other issues with this. Try replacing default with content and see if that gets you what you are expecting:

uid: test123
timestamp: May 5, 2021, 9:42:15 PM
component: f7-card
config:
  expandable: true
slots:
  content:
    - component: oh-rollershutter-card
      config:
        item: test_item
1 Like
3

Thank you JustinG. Changing it from default to content didn’t change it, but I got the right idea from it. :wink:

The oh-rollershutter-card was there, it was just not visible because it somehow was outside of the card.
That made me realise two other things:

  1. I should use oh-rollershutter instead of oh-rollershutter-card.
  2. My example may have been a littel over-simplified, there should have been at least some layout structure.

This example works as expected:

uid: test123
timestamp: May 6, 2021, 9:17:16 AM
component: f7-card
config:
  expandable: true
  style:
    height: 100px
slots:
  content:
    - component: f7-card-content
      config:
        style:
          display: flex
          flex-direction: column
      slots:
        default:
          - component: oh-rollershutter
            config:
              item: test_item

I can now continue my journey through OH3 Widgets. Thank you!