state-switch: box-shadow not displayed

[ildar170975]

Since some update the outer border's shadow is not displayed with a default theme:

title: state-switch-5
path: test-state-switch-5
cards:

  - type: entities
    entities:
      - input_boolean.test_boolean

  - type: custom:state-switch
    entity: input_boolean.test_boolean
    states:
      "on":
        type: entities
        entities:
          - entity: sun.sun
          - entity: binary_sensor.updater
          - entity: zone.home
      "off":
        type: entities
        entities:
          - entity: zone.home
          - entity: sun.sun
          - entity: binary_sensor.updater

[ildar170975]

Downgraded to ver. 8 - shadows are OK.

[martinhoess]

Problem still exists with latest HA 2021.12.7

type: horizontal-stack
cards:
  - type: custom:restriction-card
    condition:
      entity: switch.pc
      value: 'on'
    card:
      type: entity-button
      entity: switch.pc
      hold_action:
        action: call-service
        service: shell_command.pc_sleep
      icon: mdi:desktop-tower-monitor
      name: PC
      tap_action:
        action: toggle
  - type: custom:restriction-card
    card:
      type: custom:state-switch
      entity: binary_sensor.work
      states:
        'on':
          type: entity-button
          entity: switch.momentary_work_clock_out
        'off':
          type: entity-button
          entity: switch.momentary_work_clock_in

[ildar170975]

The problem is present again after update to 1.9.4 (((

[ildar170975]

Fixed again in 1.9.5

[iptvcld]

This is broken again on HA 2022.8.7 and state-switch 1.9.5

[ildar170975]

@iptvcld Strange, I do not seen any problems with my test example from the 1st post. Could you post a small MWE demonstrating the issue?

[iptvcld]

On 1.9.5

Downgraded to 1.9.4 - still same issue Downgraded to 1.9.3 - shows ok!

Made sure browser cache was cleared and tested on multiple devices

Thank you,

[ildar170975]

This is not an MWE.

[ildar170975]

Post a code.

[iptvcld]

Sorry; please see the code below. On version 1.95

type: custom:state-switch
view_layout:
  column: 3
entity: user
states:
  HomeAssistant:
    type: entity-filter
    show_empty: false
    entities:
      - light.exterior_potlights
      - switch.eb0ab69dddd36bfc06u0qj
      - switch.master_room
    state_filter:
      - 'on'
    card:
      state_color: true
      show_header_toggle: false
      title: TEST

Then when i go to 1.93 - it shows fine.

[ildar170975]

This is not about state-switch, it is about entity-filter - seems it does not have box-shadow itself. Replace it with Entities card, see it by yourself.

Check this example - the 2nd card is forced to be w/o box-shadow:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean

  - type: custom:state-switch
    entity: input_boolean.test_boolean
    states:
      "on":
        type: entities
        entities:
          - entity: sun.sun
          - entity: zone.home
        card_mod:
          style: |
            ha-card {
              color: red;
            }

      "off":
        type: entities
        entities:
          - entity: zone.home
          - entity: sun.sun
        card_mod:
          style: |
            ha-card {
              color: cyan;
              box-shadow: none;
            }

[AndLindemann]

I also have the box shadow issue:

      - type: custom:state-switch
        entity: sensor.abfall_graue_tonne
        states:
          5:
            type: custom:button-card
            entity: sensor.abfall_graue_tonne
            label: |
              [[[
                var days_to = entity.state
                if (days_to == 0)
                { return "Heute" }
                else if (days_to == 1)
                { return "Morgen" }
                else
                { return days_to + " Tage" }
              ]]]
            tap_action:
              action: "more-info"
            show_icon: true
            show_label: true
            show_name: false
            show_state: false
            styles:
              icon:
                - color: gray
              label:
                - justify-self: "center"
                - padding: "0px 6px"
                - font-weight: "bold"
                - font-size: "12px"
                - margin-left: "0px"
              img_cell:
                - place-self: "center"
                - width: "14px"
                - height: "24px"
              grid:
                - grid-template-areas: "'i l'"
                - grid-template-columns: "max_content auto"
                - grid-template-rows: "min-content"
              card:
                - border-radius: "18px"
                - box-shadow: "var(--box-shadow)"
                - height: "36px"
                - width: "auto"
                - padding-right: "6px"
                - padding-top: "6px"
                - padding-button: "6px"
                - padding-left: "12px"
            size: "100%"

[ildar170975]

@AndLindemann Next time please post a simple MWE to demonstrate your issue. https://en.wikipedia.org/wiki/Minimal_reproducible_example

Check this example:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_select.test_value
  - type: custom:state-switch
    entity: input_select.test_value
    states:
      one:
        type: entities
        title: entities
        entities:
          - entity: sun.sun
          - entity: binary_sensor.service_on_value
          - entity: zone.home
      two:
        type: glance
        entities:
          - sun.sun
        title: glance
      three:
        type: button
        entity: sun.sun
        name: button
      four:
        type: entity
        entity: sensor.processor_use
      five:
        type: history-graph
        entities:
          - sun.sun
      six:
        type: horizontal-stack
        cards:
          - type: button
            entity: sun.sun
          - type: button
            entity: sun.sun
      seven:
        type: custom:button-card
        entity: sun.sun
        name: custom button-card
      eight:
        type: custom:mini-graph-card
        entities:
          - sensor.processor_use
      nine:
        type: custom:apexcharts-card
        series:
          - entity: sensor.processor_use
      ten:
        type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            series:
              - entity: sensor.processor_use

It shows an input_select and a card inside state-switch:

Code for input_select:

input_select:
  test_value:
    options:
      - one
      - two
      - three
      - four
      - five
      - six
      - seven
      - eight
      - nine
      - ten
      - eleven
      - twelve

As you will see, every STANDARD card is displayed PROPERLY. And every CUSTOM card is displayed CLIPPED. I guess this is about how a custom card handles an overflow property from the container (which is a state-switch).

How to solve the issue - place the whole custom card into vertical-stack - see this case:

      ten:
        type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            series:
              - entity: sensor.processor_use

[AndLindemann]

... How to solve the issue - place the whole custom card into vertical-stack - see this case:

      ten:
        type: vertical-stack
        cards:
          - type: custom:apexcharts-card
            series:
              - entity: sensor.processor_use

Just checked, you're right, that actually works. Thanks for the hint!

[ildar170975]

Great. A small picture for my example: