Custom_fields with a card inside is not clickable

[shahrukh0104]

Checklist

• [X] I updated the card to the latest version available
• [X] I cleared the cache of my browser

Describe the bug I wrapped a non-clickable card in a custom:button-card with custom_fields to be able to use the tap_action so that the card is clickable. The part of the button-card that has the child card becomes non clickable. That works against its purpose, if a whole card is supposed to be a clickable button. Basically, the non-clickable card, stays non-clickable even wrapped in a button-card.

I tried doing it with a simpler non-clickable card just to be sure that it is not the card that is the problem. But this too does not work. The code below is with the simpler non-clickable card.

Ah yes, with styling does not work at all. Without styling card, it works on the parts where the title-card does not cover the button card, but I want the whole button to be clickable.

Version of the card Version: 4.1.2

To Reproduce This is the configuration I used:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.toogle_entur_views
        state: Set 1
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.toogle_entur_views
          option: Set 2
      custom_fields:
        my_card1:
          card:
            type: custom:mushroom-title-card
            title: Hello, there !
      styles:
        card:
          - position: relative 
          - height: 100px
          - width: 460px
        custom_fields:
          my_card1: 
             - position: absolute
             - z-index: 1
             - top: 0
             - left: 0
             - right: 0
             - bottom: 0
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.toogle_entur_views
        state: Set 2
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.toogle_entur_views
          option: Set 1
      custom_fields:
        my_card:
          card:
            type: custom:mushroom-title-card
            title: Hello, back!

Additional context Add any other context about the problem here.

[pedolsky]

styles:
  card:
    - z-index: 1 #push the clickable part to the foreground 
    …

  custom_fields:
    my_card1:
      - z-index: -1 #push the non-clickable part to the background 
      …

[dcapslock]

Confirm that styling z-index is a suitable solution for your use case. The way that custom_fields stack with actions is by design.