Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vertical Stack Card editor issues with nested Vertical and Horizontal cards #23378

Open
4 tasks done
keiferoh opened this issue Dec 21, 2024 · 2 comments
Open
4 tasks done

Vertical Stack Card editor issues with nested Vertical and Horizontal cards #23378

keiferoh opened this issue Dec 21, 2024 · 2 comments

Comments

@keiferoh
Copy link

keiferoh commented Dec 21, 2024 •
edited
Loading

Checklist

  • I have updated to the latest available Home Assistant version.
  • I have cleared the cache of my browser.
  • I have tried a different browser to see if it is related to my browser.
  • I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Multiple horizontal stack cards nested inside vertical stack card. When using the card editor and selecting the different horizontal stack cards, the selected horizontal stack card does not appear. Instead, the previous card is still displayed in the editor. This has resulted in multiple cards being incorrectly updated when using the visual editor.

Describe the behavior you expected

When selecting a different set of horizontal stack cards within a vertical stack, it should select the correct cards by default.

Steps to reproduce the issue

  1. Create a Vertical Stack card
  2. Create multiple Horizontal Stack cards within the Vertical Stack card
  3. Save and exit
  4. Return to Visual Editor and navigate around the different cards in the Vertical Stack and observe the displayed card in the editor does not always change.
    ...

What version of Home Assistant Core has the issue?

2024.10

What was the last working version of Home Assistant Core?

2024.9

In which browser are you experiencing the issue with?

Safari Version 18.2 (20620.1.16.11.8) Chrome Version 131.0.6778.205 (Official Build) (arm64) Firefox 133.0.3 (aarch64)

Which operating system are you using to run this browser?

macOS Sequoia 15.2

State of relevant entities

No response

Problem-relevant frontend configuration

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        show_name: false
        show_label: true
        size: 100%
        styles:
          card:
            - text-align: right
            - padding-top: 15px
            - font-family: Antonio
            - height: 100px
            - border-radius: 0px
            - "--mdc-ripple-color": gray
            - "--mdc-ripple-press-opacity": 0.5
            - width: 15px
            - background: black
          label:
            - padding-right: 10px
            - justify-self: right
            - font-size: 24px
            - color: white
      - type: custom:button-card
        size: 100%
        show_label: true
        styles:
          label:
            - padding-right: 10px
            - font-family: Antonio
            - justify-self: right
            - font-size: 36px
            - color: black
            - padding-bottom: 15px
          card:
            - text-align: right
            - padding-top: 15px
            - font-family: Antonio
            - height: 100px
            - width: 65px
            - border-radius: 50px 0px 0px 50px
            - "--mdc-ripple-color": gray
            - "--mdc-ripple-press-opacity": 0.5
            - background: |
                [[[
                  if (states['input_select.sidebar_pages'].state == 'lights')
                   return "linear-gradient(45deg, rgb(244,244,244) 5%, rgb(255,255,255) 10%, rgb(244,244,244) 30%, rgb(221,221,221) 50%, rgb(244,244,244)  70%, rgb(255,255,255) 80%, rgb(244,244,244) 5%)"
                  else return "rgb(54, 69, 75)";
                ]]]
            - box-shadow: |
                [[[
                  if (states['input_select.sidebar_pages'].state == 'lights')
                   return "4px 4px gray"
                  else return "none";
                ]]]
        label: |
          [[[
            return (states['sensor.total_lights'].state)
          ]]]
      - type: custom:button-card
        entity: sensor.keith_distance
        name: Lights
        template: sidebar_nav
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.sidebar_pages
            option: lights
        styles:
          label:
            - color: transparent
        label: |
          [[[
            return (states['sensor.total_lights'].state)
          ]]]
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        show_name: false
        show_label: true
        size: 100%
        styles:
          card:
            - text-align: right
            - padding-top: 15px
            - font-family: Antonio
            - height: 100px
            - border-radius: 0px
            - "--mdc-ripple-color": gray
            - "--mdc-ripple-press-opacity": 0.5
            - width: 15px
            - background: black
          label:
            - padding-right: 10px
            - justify-self: right
            - font-size: 24px
            - color: white
      - type: custom:button-card
        size: 100%
        color_type: icon
        show_label: true
        color: auto
        styles:
          label:
            - padding-right: 10px
            - font-family: Antonio
            - justify-self: right
            - font-size: 36px
            - color: black
            - padding-bottom: 15px
          card:
            - text-align: right
            - padding-top: 15px
            - font-family: Antonio
            - height: 100px
            - width: 65px
            - border-radius: 50px 0px 0px 50px
            - "--mdc-ripple-color": gray
            - "--mdc-ripple-press-opacity": 0.5
            - background: |
                [[[
                  if (states['input_select.sidebar_pages'].state == 'packages')
                    return "linear-gradient(45deg, rgb(244,244,244) 5%, rgb(255,255,255) 10%, rgb(244,244,244) 30%, rgb(221,221,221) 50%, rgb(244,244,244)  70%, rgb(255,255,255) 80%, rgb(244,244,244) 5%)"
                  else return "rgb(54, 69, 75)";
                ]]]
            - box-shadow: |
                [[[
                  if (states['input_select.sidebar_pages'].state == 'packages')
                   return "4px 4px gray"
                  else return "none";
                ]]]
        label: |
          [[[
            return (states['sensor.total_package_deliveries'].state)
            + '<br>' + (states['sensor.mail_usps_mail'].state)
          ]]]
      - type: custom:button-card
        name: Deliveries
        template: sidebar_nav
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.sidebar_pages
            option: packages
        label: |
          [[[
            return (states['sensor.total_package_deliveries'].state)
            + ' ' + (states['sensor.mail_usps_mail'].state)
          ]]]
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        show_name: false
        show_label: true
        size: 100%
        styles:
          card:
            - text-align: right
            - padding-top: 15px
            - font-family: Antonio
            - height: 100px
            - border-radius: 0px
            - "--mdc-ripple-color": gray
            - "--mdc-ripple-press-opacity": 0.5
            - width: 15px
            - background: black
          label:
            - padding-right: 10px
            - justify-self: right
            - font-size: 24px
            - color: white
      - type: custom:button-card
        size: 100%
        show_label: true
        color_type: icon
        color: auto
        styles:
          label:
            - font-family: Antonio
            - justify-self: right
            - font-size: 36px
            - color: black
            - padding-bottom: 15px
          card:
            - text-align: right
            - padding-top: 15px
            - font-family: Antonio
            - height: 100px
            - width: 65px
            - border-radius: 50px 0px 0px 50px
            - "--mdc-ripple-color": gray
            - "--mdc-ripple-press-opacity": 0.5
            - background: |
                [[[
                  if (states['input_select.sidebar_pages'].state == 'media')
                    return "linear-gradient(45deg, rgb(244,244,244) 5%, rgb(255,255,255) 10%, rgb(244,244,244) 30%, rgb(221,221,221) 50%, rgb(244,244,244)  70%, rgb(255,255,255) 80%, rgb(244,244,244) 5%)"
                  else return "rgb(54, 69, 75)";
                ]]]
            - box-shadow: |
                [[[
                  if (states['input_select.sidebar_pages'].state == 'media')
                   return "4px 4px gray"
                  else return "none";
                ]]]
        label: |
          [[[
            return (states['media_player.living_room'].attributes.volume_level) 
          ]]]
      - type: custom:button-card
        name: Music
        template: sidebar_nav
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.sidebar_pages
            option: media
        label: |
          [[[
            return (states['media_player.living_room'].attributes.media_title) 
            + '<br>' + (states['media_player.living_room'].attributes.media_artist) 
          ]]]
        styles:
          label:
            - font-size: 18px
view_layout:
  position: sidebar

Javascript errors shown in your browser console/inspector

No response

Additional information

No response
@keiferoh
Copy link
Author

keiferoh commented Dec 23, 2024 •
edited
Loading

HA.2024.10.bug.mov

I have screen capture showing issue, but unable to upload. If anyone wold like to see it please contact me.

@keiferoh
Copy link
Author

keiferoh commented Dec 24, 2024 •
edited
Loading

Simplified yaml with screen recording:

title: Visual Editor Test
views:

  • title: Test
    path: test
    cards:
    • type: vertical-stack
      cards:
      • type: horizontal-stack
        cards:
        • type: button
          show_label: true
          label: Lights
        • type: button
          name: Lights
          label: Lights
      • type: horizontal-stack
        cards:
        • type: button
          show_label: true
          label: Deliveries
        • type: button
          name: Deliveries
          label: Deliveries
      • type: horizontal-stack
        cards:
        • type: button
          show_label: true
          label: Music
        • type: button
          name: Music
          label: Music
Screen.Recording.2024-12-24.at.4.58.27.PM.mov

@keiferoh keiferoh changed the title Visual Editor issues with nested Vertical and Horizontal cards Card editor issues with nested Vertical and Horizontal cards Dec 26, 2024
@keiferoh keiferoh changed the title Card editor issues with nested Vertical and Horizontal cards Vertical Stack Card editor issues with nested Vertical and Horizontal cards Dec 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@keiferoh