Some Grid Elements not showing when wrapped inside state-switch

[TinyShark]

I have an issue on a card that I have created that when inside a state-switch card, does not display correctly and is missing the buttons defined within their grid-areas. The grid layout still exists and is correct but the content is not visible.

This is the card, without state-switch:

This is the card, wrapped inside state-switch:

This is my YAML for the config:

- type: custom:state-switch
  view_layout:
    grid-area: stat2
    justify-self: center
    align-self: stretch
  entity: hash
  transition: flip-y
  default: p1
  states:
    p1:
      type: custom:stack-in-card
      view_layout:
        grid-area: stat2
        justify-self: center
        align-self: stretch
      card_mod:
        style: |
          ha-card {
            border-radius: 15px !important;
            padding-top: 2.5%;
            box-shadow: 0px 10px 60px -30px rgba(0,0,0,1) !important;
            background-color: {{ 'rgba(255,123,0,0.4)' if is_state('sensor.wiser_hot_water', 'On') else 'rgba(0,0,0,0.1)' }};
            overflow: hidden;
            height: 12vh;
          }
          @media (max-width: 600px) {
            ha-card {
              border-radius: 15px !important;
              padding: 0% 3% 0% 3%;
              box-shadow: 0px 10px 60px -30px rgba(0,0,0,1) !important;
              background-color: {{ 'rgba(255,123,0,0.4)' if is_state('sensor.wiser_hot_water', 'On') else 'rgba(0,0,0,0.1)' }};
              overflow: hidden;
              height: 23.5vh;
            }
      keep:
        margin: false
        box_shadow: false
        background: false
      cards:
        - type: custom:layout-card
          layout_type: grid
          layout:
            margin: 0
            padding: 0
            card_margin: 0
            place-items: center
            grid-template-rows: 5.5vh 5.5vh
            grid-template-columns: >-
              minmax(50px, 1fr) minmax(50px, 2fr) minmax(20px,
              1fr) minmax(20px, 1fr) 4%
            grid-row-gap: 0%
            grid-column-gap: 1%
            grid-template-areas: |
              "icon name button1 button2 ."
              "icon name button3 button3 ."
            mediaquery:
              '(max-width: 600px)':
                grid-template-columns: 25% 25% 25% 25%
                grid-template-rows: 50% 15.5% 27%
                grid-row-gap: 0%
                grid-column-gap: 0%
                place-items: center
                grid-template-areas: >
                  ". icon name ." "button1 button1 button2
                  button2" "button3 button3 button3 button3"
          cards:
            - type: custom:mushroom-template-card
              view_layout:
                grid-area: icon
                align-self: center
              entity: sensor.wiser_hot_water
              tap_action:
                action: navigate
                navigation_path: '#p2'
              card_mod:
                style:
                  .: |
                    :host {
                      --masonry-view-card-margin: 0px;
                    }
                    ha-card {
                      box-shadow: none;
                      padding-top: 0px !important;
                      padding-bottom: 0px !important;
                      margin-top: 0px;
                      margin-left: -50px;
                      background-color: rgba(28,28,28,0) !important;
                      --card-primary-font-size: 2.3vw;
                      --card-primary-font-weight: 300;
                      --card-secondary-font-weight: 100;
                      --card-secondary-font-size: 1em;
                      --primary-text-color: black;
                      --secondary-text-color: black;
                      --icon-size: 200px;
                      --icon-symbol-size: 70px;
                    }
                    @media (max-width: 1600px) {
                      ha-card {
                        margin-left: -50px;
                        margin-top: 2px;
                        --icon-size: 150px;
                        --icon-symbol-size: 40px;
                      }
                    @media (max-width:600px) {
                      ha-card {
                        --card-primary-font-size: 6vw;
                        align-items: start;
                        margin-left: -135px;
                        margin-top: -10px;
                      }
                  mushroom-shape-icon$: >
                    .shape {
                      --shape-color: rgba(0,0,0,0.1);
                    }

                    {% set
                    state=states('sensor.wiser_hot_water') %}

                    {% if state == 'On' %}
                      .shape {
                        --shape-animation: ping 1.8s ease-out infinite;
                        --shape-color: rgba(var(--rgb-orange), 0.2);
                      }
                      @keyframes ping {
                        0% {
                          box-shadow: 0 0 5px 1px rgba(var(--rgb-orange), 0.7);
                        }

                        100% {
                          box-shadow: 0 0 0px 290px transparent;
                        }
                      }
                      .shape ha-icon {
                        padding-left: 50px;
                        --icon-animation: pulse 1.8s ease-in-out infinite;
                      }
                      @keyframes pulse {
                        0% {
                          opacity: 0.2;
                        }

                        100% {
                          opacity: 1;
                        }
                      }
                    {% endif %} .shape ha-icon {
                      padding-left: 50px;
                    }
              primary: null
              secondary: null
              icon: mdi:water-boiler
              icon_color: >-
                {% set mode = states('sensor.wiser_hot_water')
                %} {% if mode == 'Off' %} #000000b3 {% elif
                mode == 'On' %} black {% else %} grey {% endif
                %}
            - type: custom:mushroom-template-card
              view_layout:
                grid-area: name
                align-self: center
              entity: sensor.wiser_hot_water
              card_mod:
                style:
                  .: |
                    :host {
                      --masonry-view-card-margin: 0px;
                    }
                    ha-card {
                      box-shadow: none;
                      align-items: start;
                      align-self: center;
                      padding-top: 0px !important;
                      padding-bottom: 0px !important;
                      margin-top: -2px;
                      margin-left: -35px;
                      background-color: rgba(28,28,28,0) !important;
                      --card-primary-font-size: 2.3vw;
                      --card-primary-font-weight: 300;
                      --card-secondary-font-weight: 100;
                      --card-secondary-font-size: 1em;
                      --primary-text-color: black;
                      --secondary-text-color: black;
                      --icon-size: 130px;
                      --icon-symbol-size: 45px;
                    }
                    @media (max-width: 600px) {
                      ha-card {
                      --card-primary-font-size: 6vw;
                      align-items: center;
                      margin-left: -35px;
                      margin-top: 2px;
                      }
                  mushroom-shape-icon$: >
                    {% set
                    state=states('climate.wiser_family_room')
                    %}

                    {% if state == 'auto' %}
                      .shape {
                        --shape-animation: ping 2s infinite;
                      }
                      @keyframes ping {
                        0% {
                          box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                        }

                        100% {
                          box-shadow: 0 0 5px 15px transparent;
                        }
                      }
                    {% endif %} .shape ha-icon {
                      padding-left: 50px;
                    }
                  mushroom-state-info$: |
                    .container > .secondary {
                      margin-top: -5px;
                      white-space: break-spaces;
                      line-height: 16px;
                    }
                    .container {
                      width: 100%;
                      padding-left: 10%;
                      margin-top: 0px;
                    }
                    @media (min-width: 1600px) {
                      .container {
                      padding-left: 0%;
                      }
              primary: Hot Water
              secondary: >
                {% if (state_attr('sensor.wiser_hot_water',
                'boost_time_remaining') == 0) and
                (states('sensor.wiser_hot_water') == 'Off')
                and
                (states('sensor.wiser_hot_water_operation_mode')
                == 'Manual')  %} Manual Mode | OFF {% elif
                (state_attr('sensor.wiser_hot_water',
                'boost_time_remaining') == 0) and
                (states('sensor.wiser_hot_water_operation_mode')
                == 'Auto') %} AUTO | Turning {{
                state_attr('sensor.wiser_hot_water',
                'next_schedule_state')}} {{
                states('sensor.hot_water_next_schedule')}} {%
                elif state_attr('sensor.wiser_hot_water',
                'boost_time_remaining') >= 2 %} BOOST |
                {{state_attr('sensor.wiser_hot_water',
                'boost_time_remaining')}} minutes {% elif
                state_attr('sensor.wiser_hot_water',
                'boost_time_remaining') > 0 %} BOOST |
                {{state_attr('sensor.wiser_hot_water',
                'boost_time_remaining')}} minute {% endif %}
              icon: null
              tap_action: none
            - type: custom:button-card
              icon: mdi:power
              view_layout:
                grid-area: button1
              entity: sensor.wiser_hot_water_operation_mode
              color_type: card
              color: rgba(26,26,26,0.2)
              show_state: false
              show_icon: true
              show_name: false
              size: 40%
              tap_action:
                action: call-service
                service: wiser.set_device_mode
                service_data:
                  entity_id: select.wiser_hot_water_mode
                  mode: Manual
              hold_action:
                action: call-service
                haptic: success
                confirmation:
                  text: >-
                    Are you sure you sure you'd like to
                    permantely turn on the Hot Water?
                  service: button.press
                  service_data:
                    entity_id: button.wiser_toggle_hot_water
              state:
                - operator: template
                  value: >
                    [[[ return
                    (states['sensor.wiser_hot_water_operation_mode'].state.includes
                    ( "Auto")) ]]]
                  styles:
                    card:
                      - background-color: rgba(26,26,26,0.2)
                - operator: template
                  value: >
                    [[[ return
                    (states['sensor.wiser_hot_water_operation_mode'].state.includes
                    ( "Manual")) ]]]
                  styles:
                    card:
                      - background-color: '#9e3939'
              styles:
                grid:
                  - grid-template-areas: '"I"'
                  - grid-template-rows: 1fr
                  - grid-template-columns: 1fr
                card:
                  - box-shadow: none
                  - border-radius: 7px
                  - width: 92%
                  - max-height: 42px
                  - margin-left: 4%
                  - padding-top: 15px
                  - padding-bottom: 15px
                icon:
                  - color: white
              card_mod:
                style: >
                  {% if "Auto" in
                  states['sensor.wiser_hot_water_operation_mode'].state
                  %}
                    ha-card:hover { 
                      background-color: #9e3939 !important;
                    }
                  {% endif %} 

                  ha-icon {
                    width: 30% !important;
                  }

                  :host {
                     --masonry-view-card-margin: 0px;
                  }

                  #container {
                    display: flex !important;
                  }
            - type: custom:button-card
              icon: mdi:home-clock
              view_layout:
                grid-area: button2
              entity: sensor.wiser_hot_water_operation_mode
              color_type: card
              color: rgba(26,26,26,0.2)
              show_state: false
              show_icon: true
              show_name: false
              size: 40%
              tap_action:
                action: call-service
                service: wiser.set_device_mode
                service_data:
                  entity_id: select.wiser_hot_water_mode
                  mode: Auto
              state:
                - operator: template
                  value: >
                    [[[ return
                    (states['sensor.wiser_hot_water_operation_mode'].state.includes
                    ( "Auto")) ]]]
                  styles:
                    card:
                      - background-color: '#358a32'
                - operator: template
                  value: >
                    [[[ return
                    (states['sensor.wiser_hot_water_operation_mode'].state.includes
                    ( "Manual")) ]]]
                  styles:
                    card:
                      - background-color: rgba(26,26,26,0.2)
              styles:
                grid:
                  - grid-template-areas: '"I"'
                  - grid-template-rows: 1fr
                  - grid-template-columns: 1fr
                card:
                  - box-shadow: none
                  - border-radius: 7px
                  - width: 92%
                  - max-height: 42px
                  - margin-left: 4%
                  - padding-top: 15px
                  - padding-bottom: 15px
                icon:
                  - color: white
              card_mod:
                style: >
                  {% if "Manual" in
                  states['sensor.wiser_hot_water_operation_mode'].state
                  %}
                    ha-card:hover { 
                      background-color: #358a32 !important;
                    }
                  {% endif %} 

                  ha-icon {
                    width: 30% !important;
                  }

                  :host {
                     --masonry-view-card-margin: 0px;
                  }

                  #container {
                    display: flex !important;
                  }
            - type: custom:button-card
              icon: mdi:home-plus
              view_layout:
                grid-area: button3
              entity: sensor.wiser_hot_water
              color_type: null
              show_state: false
              show_icon: true
              show_name: false
              size: 20%
              tap_action:
                action: call-service
                service: script.1664020445730
              state:
                - operator: template
                  value: >
                    [[[ return
                    states['sensor.wiser_hot_water'].attributes.is_boosted
                    == 'true' ]]]
                  styles:
                    card:
                      - background-color: '#9e3939'
                - operator: template
                  value: >
                    [[[ return
                    states['sensor.wiser_hot_water'].attributes.is_boosted
                    === 'false' ]]]
                  styles:
                    card:
                      - background-color: rgba(26,26,26,0.2)
                - operator: template
                  value: >
                    [[[ return
                    states['sensor.wiser_hot_water'].attributes.is_boosted
                    == '0' ]]]
                  styles:
                    card:
                      - background-color: rgba(26,26,26,0.2)
                - operator: template
                  value: >
                    [[[ return
                    states['sensor.wiser_hot_water'].attributes.is_boosted
                    > '0' ]]]
                  styles:
                    card:
                      - background-color: '#9e3939'
                  icon: mdi:cancel
                - operator: template
                  value: >
                    [[[ return
                    states['sensor.wiser_hot_water'].attributes.is_override
                    > '0' ]]]
                  styles:
                    card:
                      - background-color: '#9e3939'
                  icon: mdi:cancel
              styles:
                grid:
                  - grid-template-areas: '"I"'
                  - grid-template-rows: 1fr
                  - grid-template-columns: 1fr
                card:
                  - box-shadow: none
                  - border-radius: 7px
                  - width: 96%
                  - max-height: 42px
                  - margin-left: 2%
                icon:
                  - color: white
              card_mod:
                style: >
                  {% if (state_attr('sensor.wiser_hot_water',
                  'is_boosted') == 0 ) %}
                    ha-card:hover { 
                      background-color: #9e3939 !important;
                    }
                  {% elif
                  (state_attr('sensor.wiser_hot_water',
                  'is_boosted') == 1 ) %}
                    ha-card:hover { 
                      background-color: black !important;
                    }
                  {% endif %}

                  ha-icon {
                    width: 15% !important;
                  }

                  :host {
                     --masonry-view-card-margin: 0px;
                  }

                  #container {
                    display: flex !important;
                  }
    p2:....

[TinyShark]

Interestingly, I left the page open overnight and the buttons have appeared. Upon refresh they disappear again...

If I use a duplicate of the card, without being wrapped within state-switch (left card) and press the buttons, they then appear on the problematic card (right card). After a browser refresh they disappear again.

[ildar170975]

Your 1st post contains a code with ~500 lines. Not sure that someone will try to reproduce it. To demonstrate an issue, people usually post a Minimal Working Example - a short code snippet. Sometimes people even resolve issues themselves while preparing an MWE.

[TinyShark]

Does not display button card (Chrome). layout_card > state_switch > stack_in_card > layout_card > custom_button_card...

If I refresh my browser continuously, the button will sometimes appear in the below example. Does not appear however many times I refresh on my full config.

Displays button card every-other browser refresh (Chrome). state_switch > stack_in_card > layout_card > custom_button_card...

Displays button card as expected (Chrome). state_switch > layout_card > custom_button_card...

Testing example:

- type: custom:layout-card
  layout_type: grid
  layout:
    margin: 0
    grid-template-rows: 1fr
    grid-template-columns: 30% 1fr 30%
    grid-template-areas: |
      ". stat2 ."
  cards:
    - type: custom:state-switch
      view_layout:
        grid-area: stat2
        justify-self: center
        align-self: stretch
      entity: hash
      transition: flip-y
      default: p1
      states:
        p1:
          type: custom:stack-in-card
          keep:
            margin: false
            box_shadow: false
            background: false
          cards:
            - type: custom:layout-card
              layout_type: grid
              layout:
                margin: 0
                padding: 0
                card_margin: 0
                place-items: center
                grid-template-rows: 5.5vh
                grid-template-columns: >-
                  minmax(50px, 1fr) minmax(50px, 2fr)
                  minmax(20px, 1fr) minmax(20px, 1fr) 4%
                grid-column-gap: 1%
                grid-template-areas: |
                  "icon name button1 button1 ."
              cards:
                - type: custom:mushroom-template-card
                  view_layout:
                    grid-area: icon
                    align-self: center
                  entity: sensor.wiser_hot_water
                  tap_action:
                    action: navigate
                    navigation_path: '#p2'
                  icon: mdi:water-boiler
                  icon_color: white
                  primary: Hot Water
                - type: custom:button-card
                  icon: mdi:power
                  view_layout:
                    grid-area: button1
                  entity: sensor.wiser_hot_water_operation_mode
                  color_type: card
                  color: rgba(255,255,255,1)
                  show_state: false
                  show_icon: true
                  show_name: false
                  size: 40%
                  styles:
                    grid:
                      - grid-template-areas: '"i"'
                      - grid-template-rows: 1fr
                      - grid-template-columns: 1fr

[ildar170975]

This is not an MWE.

[TinyShark]

type: custom:layout-card
layout_type: grid
cards:
  - type: custom:state-switch
    entity: hash
    default: noworky
    states:
      noworky:
        type: custom:stack-in-card
        cards:
          - type: custom:layout-card
            layout_type: grid
            cards:
              - type: custom:button-card
                icon: mdi:image-broken

[ildar170975]

Check your conditions:

    entity: hash
    default: noworky
    states:
      noworky:

Works with an input_boolean (not appears fast after a browser's page reload):

type: custom:layout-card
layout_type: grid
cards:
  - type: custom:state-switch
    entity: input_boolean.test_boolean
    default: 'off'
    states:
      'off':
        type: custom:stack-in-card
        cards:
          - type: entity
            entity: sun.sun
          - type: custom:layout-card
            layout_type: grid
            cards:
              - type: button
                icon: mdi:car
                entity: sun.sun
      'on':
        type: custom:stack-in-card
        cards:
          - type: custom:layout-card
            layout_type: grid
            cards:
              - type: button
                icon: mdi:car
                entity: sun.sun
              - type: button
                icon: mdi:car
                entity: sun.sun
          - type: entity
            entity: sun.sun

[TinyShark]

Yes a normal type: button indeed works as expected with either hash or input_boolean but type: custom:button-card does not show with either condition.

Seems to be a conflict between custom:button-card and state-switch

type: custom:layout-card
layout_type: grid
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
  - type: custom:layout-card
    layout_type: grid
    cards:
      - type: custom:state-switch
        entity: input_boolean.test_boolean
        default: 'off'
        states:
          'off':
            type: custom:stack-in-card
            cards:
              - type: entity
                entity: sun.sun
              - type: custom:layout-card
                layout_type: grid
                cards:
                  - type: button
                    icon: mdi:car
                    entity: sun.sun
          'on':
            type: custom:stack-in-card
            cards:
              - type: custom:layout-card
                layout_type: grid
                cards:
                  - type: button
                    icon: mdi:car
                    entity: sun.sun
                  - type: custom:button-card
                    icon: mdi:car
                    entity: sun.sun
              - type: entity
                entity: sun.sun

[ildar170975]

Seems to be a conflict between custom:button-card and state-switch

You got quite a hamburger. Try to remove the 1st layer (1st layout-card).

[TinyShark]

An odd but necessary hamburger unfortunately!

However, removing the first custom:layout-card does not work properly either. I would say it shows more frequently than with the layout card, but it's hit or miss between browser refreshes of whether it displays.

      - type: entities
        entities:
          - input_boolean.test_boolean
      - type: custom:layout-card
        layout_type: grid
        cards:
          - type: custom:state-switch
            entity: input_boolean.test_boolean
            default: 'off'
            states:
              'off':
                type: custom:stack-in-card
                cards:
                  - type: entity
                    entity: sun.sun
                  - type: custom:layout-card
                    layout_type: grid
                    cards:
                      - type: button
                        icon: mdi:car
                        entity: sun.sun
              'on':
                type: custom:stack-in-card
                cards:
                  - type: custom:layout-card
                    layout_type: grid
                    cards:
                      - type: button
                        icon: mdi:car
                        entity: sun.sun
                      - type: custom:button-card
                        icon: mdi:car
                        entity: sun.sun
                  - type: entity
                    entity: sun.sun