conditional state leaves a gap in card when 'off'

[Mariusthvdb]

type: vertical-stack
cards:

  - type: custom:state-switch
    entity: input_boolean.show_browser_path
    states:
      'on':
        type: custom:button-card
        aspect_ratio: 12/1
        variables:
          view: >
            [[[ return window.location.pathname.split('/')[2]; ]]]
#formatting 

  - type: custom:stack-in-card
    mode: horizontal

showing fine when 'on'

however, turning off the boolean, turns the state-switch off alright, but still leaves a gap:

clearly visible on the right hand side where both cards ideally should align

taking the state switch out of the vertical-stack and setting it individually in the view:

cards:

  - type: custom:state-switch
    entity: input_boolean.show_browser_path
    states:
      'on':
        type: custom:button-card
        aspect_ratio: 12/1
        variables:
          view: >
            [[[ return window.location.pathname.split('/')[2]; ]]]
        name: >
          [[[ function capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
              }
              return capitalizeFirstLetter(variables.view.replace('_',' ')); ]]]
        styles:
          name:
            - justify-self: left

  - !include /config/lovelace/buttons/buttons_shortcut_menu.yaml

makes it behave as desired

Please let me know if this expected? or would I need to write-up an issue in vertical-stack frontend repo

[jazzyisj]

I experience the same. Unfortunately I have several instances where I must use a container card (I'm actually using stack-in-card). In my case it also triggers the borders/background so I have a visible line when there is an empty container.

I think it's possibly the same issue as this? https://github.com/thomasloven/lovelace-state-switch/issues/63

If I had to guess the issue is the container card is created whether the state switch returns a result or not. I'm not sure there is anything Thomas can do about that with state-switch. The same thing happens with native conditional cards.

Perhaps the core container cards (vertical-stack, horizontal-stack) could check to see if they contain any cards and hide themselves if not, similar to entity-filter and the show_empty parameter?

[Mariusthvdb]

yes, it probably is. though I fear its not a state-switch issue, but are a thing of the container cards. Its been a long time thing for conditional card in core HA, so always try and use state-switch, and find a way no gaps are shown.

[jazzyisj]

Hey Marius I think this go resolved on the HA end, looks like conditional cards are fixed too. Can you confirm?

I used to get a space/border here, it's gone now.

[Mariusthvdb]

no it is still there, showing here with a somewhat cryptic screenshot, but suffice to say the large vertical gap holds a few camera's that now are not showing, because of the condition. Should have been the same height as the vertical gap:

[mrgrlscz]

Hi there, foud this workaround to align the cards when state-switch is not "active" (the off state display a blank card). it's working for me BUT there's a little movement/animation when the view is loaded any idea to improve that?

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      margin-top: {{ "-8px" if is_state('your_entity','off') }}; /*maybe you'll have to adjust the '8px' value*/
    }
cards:
  - type: custom:state-switch
    entity: your_entity
    states:
      'on':
        type: ..................................