bramkragten / swipe-card

Card that allows you to swipe throught multiple cards for Home Assistant Lovelace
234 stars 32 forks source link

Vertical swipe direction causes endless expansion #64

Open cannibalflea opened 1 year ago

cannibalflea commented 1 year ago

I've tried to change the swipe direction for the cards from horizontal (default) to vertical using the direction parameter. Here is the yaml:

type: custom:swipe-card
parameters:
  spaceBetween: 8
  effect: slide
  direction: vertical
  nested: true
  scrollbar:
    hide: true
    draggable: true
    snapOnRelease: true

However, that causes an odd issue with the card area starting to continuously expand vertically. This then requires you to actually edit the raw dashboard yaml because you can't click on "edit" button at the bottom of the card anymore.

I looked through the home assistant forums and the github issues but I didn't find any similar reports. Not sure if I'm doing something wrong. I'm using v5.0.0.

ASNNetworks commented 1 year ago

I can confirm this issue, however I experienced this like over 2 years ago when I first started to use this card. I solved it back then by creating a fixed height by adding this to the parameters:

  autoHeight: true
  height: 30

Not sure if it fixes your issue, but mine stopped doing that endless expanding. Make sure you use the height of the card you use in the swipe-card.

cannibalflea commented 1 year ago

@ASNNetworks thanks that seemed to solve the issue, although as you said, you need to fix the height.

Shot in the dark, but have you ever used a swiper card nested within another swiper card (one going in the horizontal direction, the other vertical). Reviewing the swiperjs docs, it seems this is supported and works in pure swiperjs demos. However, I'm not sure if it is possible to use it within lovelace:

type: custom:swipe-card
parameters:
  spaceBetween: 8
  effect: slide
  direction: horizontal
  autoHeight: true
  height: 120
  scrollbar:
    hide: true
    draggable: true
    snapOnRelease: true
cards:
  - type: custom:swipe-card
    parameters:
      spaceBetween: 5
      effect: slide
      direction: vertical
      autoHeight: true
      nested: true
      height: 120
      pagination:
        enabled: true
        clickable: true
    cards:
      - type: gauge
        entity: sensor.top_temperature
        needle: true
        height: 120
        severity:
          green: 0
          yellow: 20
          red: 30
        name: Temperature
      - type: gauge
        entity: sensor.top_humidity
        needle: true
        height: 120
        severity:
          green: 0
          yellow: 0.7
          red: 1
        name: Humidity