Broken configuration after core 2024.6.0

Configuration Frontend
1

before the 2024.6.0 update the tab worked correctly, i.e. the menu remained fixed on the page and made the movement as soon as the application was opened while now it remains still and stuck at the bottom of the page, does anyone know what happened next the update and why does this code no longer work?

type: custom:vertical-stack-in-card
cards:
  - type: custom:decluttering-card
    template: footer_sticky_menu
style: |
  :host {
    position: sticky !important;
    bottom: 26px;
    margin-bottom: 10px !important;
    animation: 1.2s position ease-in-out;
  }
  @keyframes position {
    0% { bottom: -80px; }
    20% { bottom: -80px; }
    70% { bottom: 26px; }
    90% { bottom: 24px; }
    100% { bottom: 26px; }
  }
  ha-card { 
    background: none;
    border-radius: 26px !important;
  }
  :host:before {
    content: '';
    display: block;
    position: absolute;
    bottom: -26px;
    left: -8px;
    padding-right: 16px;
    height: 130px;
    width: 100%; 
    background: rgb(109, 173, 147)
    pointer-events: none;
    animation: 1.2s opacity ease-in-out;
  }
  @keyframes opacity {
    0% { opacity: 0; }
    20% { opacity: 0; }
    100% { opacity: 1; }
  }
  ### The sticky position don't work with Decluttering card
  ### This is why I have to add the CSS here
2

Please format your code as per section 11 here: How to help us help you - or How to ask a good question.

3

it should now be fine

4

It is a card-mod code, right?
Then:

  1. Do you have card-mod updated since the moment “everything worked fine”? If “yes” - check Release notes in card-mod Github, it will tell you about a necessity of “card_mod” keyword.
    I.e. should be
card_mod:
  style: |
    ....

(cannot say anything about other parts of card-mod code)

  1. There is a DEDICATED card-mod thread, suggest to ask card-mod related questions there instead of creating own threads.
1 Like