lovelace-state-switch
lovelace-state-switch copied to clipboard
thomasloven
state-switch: box-shadow not displayed
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
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
@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?
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,
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.
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;
}
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%"
@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
... 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!
