ildar170975
commented
7 months ago These are custom cards, issues with them are not considered here. Suggest you:
- Minimize the code, posting ~1000 lines is not a good idea to demonstrate an issue. Minimize to a minimal level where you still see the issue. Test with custom cards & card-mod only.
- If card-mod seems to be a culprit - post an issue in card-mod repo (guess there are some related issues there already).
- If button-card seems to be a culprit - post an issue in button-card repo.
- If the issue is persistent with a minimal code with standard cards (w/o custom plugins) - create an issue HERE (or check for existing one).
greberg
karwosts
github-actions[bot]
Checklist
Describe the issue you are experiencing
I have a dashboard which I'm casting to a Google Nest Hub. Everything looks great on the computer but when I cast it the horizontal-stack card doesnt seem work instead everything is stacked vertical. Running a reload/update in the UI it reloads and is shown correct on the Google Nest Hub as well. Any advice? See the movie
https://github.com/home-assistant/frontend/assets/213160/60909848-e3ac-4c8d-90f7-fdb90b97c2dd
Describe the behavior you expected
Should be rendered correctly the first time in Google Nest Hub
Steps to reproduce the issue
...
What version of Home Assistant Core has the issue?
2024.2.1
What was the last working version of Home Assistant Core?
No response
In which browser are you experiencing the issue with?
Google Chrome 88.0.4324.150
Which operating system are you using to run this browser?
Big Sur 1.11
State of relevant entities
No response
Problem-relevant frontend configuration
Click to expand example configuration
```yaml title: Home Cast id: 2_home_cast path: home_cast background: "right/auto linear-gradient(23deg, rgba(211,211,211,1) 0%, rgba(223,223,223,1) 34%, rgba(255,255,255,1) 100%)" cards: - type: horizontal-stack cards: - type: vertical-stack cards: - type: horizontal-stack cards: - type: custom:button-card entity: alarm_control_panel.ha_alarm show_state: true show_icon: true show_name: false show_entity_picture: true state: - value: 'armed_away' icon: mdi:shield-lock color: rgb(152,251,152) - value: 'armed_home' icon: mdi:shield-home color: rgb(251, 210, 41) - value: 'disarmed' icon: mdi:shield-off color: rgb(169,169,169) style: | ha-card { margin-top: 0px; margin-left: 0px; font-family: 'Open Sans', sans-serif; padding-top: 15px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } ha-icon { width: 50% !important; } img { width: 50% !important; } #img-cell { background-color: #F5F5F5; border-radius: 25px; height: 30px !important; width: 30px !important; } #state { font-size: 50%; padding-top: -50px !important; } - type: custom:simple-date-clock-card use_military: false hide_seconds: true style: | ha-card { margin-top: 15px; margin-bottom: 15px; margin-right: 0px; margin-left: 0px; width: 150% !important; background-color: rgba(0, 0, 0, 0); font-family: 'Open Sans', sans-serif; font-size: 120%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: center; } - type: markdown content: > {{ states("sensor.temperature") }} ° style: | ha-card { margin-top: 0px; margin-left: 50px; width: 150% !important; font-family: 'Open Sans', sans-serif; padding-top: 15px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } - type: custom:button-card entity: binary_sensor.trash_can_1 show_state: false show_icon: true show_name: true show_entity_picture: true name: "Kärl 1" state: - value: 'on' icon: mdi:delete-circle color: rgb(152,251,152) - value: 'off' icon: mdi:delete-circle color: rgb(220,20,60) style: | ha-card { margin-top: 0px; margin-left: 50px; font-family: 'Open Sans', sans-serif; padding-top: 15px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 75% !important; } ha-icon { width: 60% !important; } #img-cell { background-color: #F5F5F5; border-radius: 25px; height: 30px !important; width: 30px !important; } #state { font-size: 50%; padding-top: -50px !important; } #name { font-size: 50%; padding-top: -50px !important; } - type: custom:button-card entity: binary_sensor.trash_can_2 show_state: false show_icon: true show_name: true show_entity_picture: true name: "Kärl 2" state: - value: 'on' icon: mdi:delete-circle color: rgb(152,251,152) - value: 'off' icon: mdi:delete-circle color: rgb(220,20,60) style: | ha-card { margin-top: 0px; margin-left: 0px; font-family: 'Open Sans', sans-serif; padding-top: 15px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 50% !important; } ha-icon { width: 60% !important; } #img-cell { background-color: #F5F5F5; border-radius: 25px; height: 30px !important; width: 30px !important; } #state { font-size: 50%; padding-top: -50px !important; } #name { font-size: 50%; padding-top: -50px !important; } - type: horizontal-stack cards: - type: entities entities: - type: divider style: | ha-card { font-family: 'Open Sans', sans-serif; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-top: -25px; margin-bottom: -25px; } - type: horizontal-stack cards: - type: custom:button-card entity: sensor.cirkulation_rpm show_state: true show_icon: true show_name: true show_entity_picture: true name: "Cirkulation" state: - value: '2900' icon: mdi:autorenew color: rgb(251, 210, 41) - value: '2400' icon: mdi:autorenew color: rgb(251, 210, 41) - value: '1600' icon: mdi:autorenew color: rgb(251, 210, 41) - value: 'Av' icon: mdi:autorenew-off color: rgb(220,20,60) tap_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } ha-icon { width: 60% !important; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 30px !important; width: 30px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: sensor.shelly_shht_1_6a591c_temperature show_state: true show_icon: true show_name: true show_entity_picture: true name: "Poolhus" tap_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 30px !important; width: 30px !important; } ha-icon { width: 60% !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: sensor.medelvarde_vattenhojd show_state: true show_icon: true show_name: true show_entity_picture: true name: "Vattenhöjd" state: - value: 'Värmer' icon: mdi:tape-measure color: rgb(251, 210, 41) - value: 'av' icon: mdi:tape-measure color: rgb(220,20,60) tap_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } ha-icon { width: 60% !important; } #img-cell { border-radius: 50px; height: 30px !important; width: 30px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: sensor.pool_temperature show_state: true show_icon: true show_name: true show_entity_picture: true name: "Pool" state: - value: 'Värmer' icon: mdi:radiator color: rgb(251, 210, 41) - value: 'av' icon: mdi:radiator-off color: rgb(220,20,60) tap_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 30px !important; width: 30px !important; } ha-icon { width: 60% !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: entities entities: - type: divider style: | ha-card { margin-top: -25px; margin-bottom: -25px; font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { background-color: rgba(0, 0, 0, 0); height: 50px !important; width: 150px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: gauge name: Elförbrukning just nu entity: sensor.my_p1_reader min: 0 max: 20 severity: red: 10 green: 0 yellow: 5 style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { background-color: rgba(0, 0, 0, 0); height: 50px !important; width: 150px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: entities entities: - type: divider style: | ha-card { margin-top: -25px; margin-bottom: -25px; font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { background-color: rgba(0, 0, 0, 0); height: 50px !important; width: 150px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: markdown content: > {{ states("sensor.tibber_price_level") }} style: | ha-card { margin-top: -20px; margin-left: 175px; font-family: 'Open Sans', sans-serif; padding-top: 0px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } - type: horizontal-stack cards: - type: picture-entity entity: camera.tibber_graf #camera_view: live show_name: false show_state: false style: | ha-card { margin-top: -25px; font-family: 'Open Sans', sans-serif; width: 80% !important; margin-left: 30px; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } - type: horizontal-stack cards: - type: vertical-stack cards: - type: horizontal-stack cards: - type: custom:button-card entity: light.allmanna_minispottar show_last_changed: false show_state: true show_icon: true state: - value: 'on' icon: mdi:lightbulb-on color: rgb(251, 210, 41) - value: 'off' icon: mdi:lightbulb-off color: rgb(220,20,60) tap_action: action: toggle style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: light.modbus_poolbelysning show_last_changed: false show_state: true show_icon: true state: - value: 'on' icon: mdi:lightbulb-on color: rgb(251, 210, 41) - value: 'off' icon: mdi:lightbulb-off color: rgb(220,20,60) hold_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: light.matlampa show_last_changed: false show_state: true show_icon: true state: - value: 'on' icon: mdi:lightbulb-on color: rgb(251, 210, 41) - value: 'off' icon: mdi:lightbulb-off color: rgb(220,20,60) tap_action: action: toggle style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: cover.pool_cover show_last_changed: false show_state: true show_icon: true state: - value: 'on' icon: mdi:toggle-switch color: rgb(152,251,152) - value: 'off' icon: mdi:toggle-switch-off color: rgb(220,20,60) tap_action: action: more-info hold_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: custom:button-card entity: switch.trivsel_ljus show_last_changed: false show_state: true show_icon: true state: - value: 'on' icon: mdi:lightbulb-on color: rgb(251, 210, 41) - value: 'off' icon: mdi:lightbulb-off color: rgb(220,20,60) tap_action: action: toggle style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: switch.sonos_utomhus name: "Sonos utomhus" show_last_changed: false show_state: true show_icon: true state: - value: 'playing' icon: mdi:toggle-switch color: rgb(152,251,152) - value: 'paused' icon: mdi:toggle-switch-off color: rgb(220,20,60) tap_action: action: toggle style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: custom:button-card entity: cover.door show_last_changed: false show_state: true show_icon: true state: - value: 'on' icon: mdi:toggle-switch color: rgb(152,251,152) - value: 'off' icon: mdi:toggle-switch-off color: rgb(220,20,60) tap_action: action: toggle hold_action: action: more-info style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { border-radius: 50px; height: 50px !important; width: 50px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: entities entities: - type: divider style: | ha-card { font-family: 'Open Sans', sans-serif; padding-top: 1px !important; padding-bottom: -15px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } img { width: 100% !important; } #img-cell { background-color: rgba(0, 0, 0, 0); height: 50px !important; width: 150px !important; } #name { padding-top: 5px; font-size: 70%; } #state { padding-top: 5px; font-size: 70%; } #label { font-size: 70%; } - type: horizontal-stack cards: - type: custom:weather-card entity: weather.smhi_home current: false details: false forecast: true style: | ha-card { font-family: 'Open Sans', sans-serif; font-size: 50%; width: 80%; padding-top: 0px !important; padding-bottom: 1px !important; background-color: rgba(0, 0, 0, 0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } - type: horizontal-stack cards: - type: entities style: | ha-card { font-family: 'Open Sans', sans-serif; font-size: 75%; color: black; background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } entities: - type: divider - skolmat.skolan - type: horizontal-stack cards: - type: markdown content: > Läxa 1{{ state_attr('calendar.webcal*', 'description') }} style: | ha-card { margin-top: 15px; margin-bottom: 15px; margin-left: 0px; background-color: rgba(0, 0, 0, 0); font-family: 'Open Sans', sans-serif; font-size: 75%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: center; font-weight: 300 !important; } - type: markdown content: > Läxa 2
{{ state_attr('calendar.webcal', 'description') }} style: | ha-card { margin-top: 15px; margin-bottom: 15px; margin-left: 0px; background-color: rgba(0, 0, 0, 0); font-family: 'Open Sans', sans-serif; font-size: 75%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-align: center; font-weight: 300 !important; } ```
Javascript errors shown in your browser console/inspector
Additional information
No response