Expandable oh-cell

Add-ons UIs
1

I am desperate. I have been trying for days to control the size of an expandable card but without luck.
I have an f7-block which is larger than the default width of an expanded card.
Thus the expanded card width is not depending from its content.
I tried with different classes and styles, changed slot names to content, etc. but I cannot increase width of an expanded card.
Does anybody know?

component: oh-label-cell
config:
  header: Test
  expandable: true
  class:
    - _card-tablet-fullscreen
    - card-expandable-animate-width
  style:
    width: 1800px
    --f7-card-expandable-tablet-width: 1800px (as an alternativ I also tried this property)
slots:
  default:
    - component: f7-block
      config:
2

Hi,

I’m still playing with widgets and wanted to do the same thing.
You were so close here and this was enough to help me so I thought i’d reply as no one else has.

The issue is the component has to be a F7 component. Oh-Cell doesn’t accept the --f7 property.

Here’s a bit of my test widget which worked as expected. The expanded view opened to 300x300

component: f7-card
config:
  class:
    - card-expandable
  title: '=(props.title) ? props.title : "Blinds"'
  style:
    height: 200px
    width: 200px
    --f7-card-expandable-tablet-height: 300px
    --f7-card-expandable-tablet-width: 300px

Note, The F7-Card component in place of the oh-label-cell
I’m still learning this and haven’t gone far beyond the above yet…so wont be much more help

1 Like