position: sticky dosen't work

[giovanni247000]

after the latest updates of home assistant core my card no longer stays overlapped with the rest of the other cards but flows with all the other cards, before the latest updates it was working corectually. stiky position no longer works after the latest home assistant updates

type: custom:stack-in-card
show_title: false
mode: horizontal
cards:
  - type: custom:button-card
    styles:
      card:
        - border: none
        - height: 80px
      icon:
        - margin-bottom: 20px
      name:
        - margin-top: '-40px'
        - font-size: 12px
    icon: mdi:door
    name: Stanze
    size: 35%
    color: rgb(9, 176, 75)
    tap_action:
      action: navigate
      navigation_path: /lovelace/stanze/
  - type: custom:button-card
    styles:
      card:
        - border: none
        - height: 80px
      icon:
        - margin-bottom: 20px
      name:
        - margin-top: '-40px'
        - font-size: 12px
    icon: mdi:lightbulb
    name: Luci
    size: 35%
    color: rgb(9, 176, 75)
    tap_action:
      action: navigate
      navigation_path: /lovelace/luci/
  - type: custom:button-card
    styles:
      card:
        - border: none
        - height: 80px
      icon:
        - margin-bottom: 20px
      name:
        - margin-top: '-40px'
        - font-size: 12px
    icon: mdi:checkbox-multiple-blank-outline
    name: Categorie
    color: rgb(9, 176, 75)
    size: 35%
    tap_action:
      action: navigate
      navigation_path: /lovelace/tutti/
  - type: custom:button-card
    styles:
      card:
        - border: none
        - height: 80px
        - '--keep-background': 'true'
        - background-color: black
      icon:
        - margin-bottom: 20px
      name:
        - margin-top: '-40px'
        - font-size: 12px
    icon: mdi:star
    name: Preferiti
    size: 35%
    color: rgb(9, 176, 75)
    tap_action:
      action: navigate
      navigation_path: /lovelace/preferiti/
card_mod:
  style: |
    :host {
      position: sticky !important;
      bottom: 0;
      margin-bottom: 10px !important;
    }
    ha-card { 
      background-color: black;
      border-top: 2px solid rgba(13, 175, 75, 0.4);
      border-left: 2px solid black;
      border-right: 2px solid black;
      border-bottom: none;
      border-radius: 0;
      margin: 0 -1%;
      width: 112%;
      max-width: 102%;
      height: 90px;  # Aumenta l'altezza qui
    }

[Mariusthvdb]

since you didnt post the Bug template you were asked to, let me ask you to close this and open a support question in the community thread on card-mod.

it could be that core HA changed internal settings, and its up to us to find out how to handle those, if needed.

your best chance for that is in the community

please close here, as this is not a card-mod bug.

this works for a stack card:

      type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            position: fixed;
            background: var(--primary-color);
            bottom: 10px;
            z-index: 1;
          }
          @media (min-width: 570px)  {
            ha-card {
              width: 494px;
            }
          }
          @media (orientation: portrait) and (max-width: 569px) {
            ha-card {
              width: calc(100%); /*384px;*/
            }
          }

[VNRARA]

This works, but I have no clue how to translate this to card-mod yet.

So basically the hui-card should be modified.

I think I'm on to something but I need to change it so it works with

card_mod:
   class: "class"

  card-mod-theme: "Google Theme"
  card-mod-view-yaml: |
    "hui-masonry-view  $ #columns " : |      
      @media only screen and (max-width: 600px){
        hui-card:last-of-type:has(hui-markdown-card) {
          bottom: 10px!important;
          position: sticky!important;
        }
      }

Just need to figure out how to set a condition to only edit elements that have a ha-card with a specific class in it.

[jimz011]

@VNRARA did you also find a way to do this per card (e.g. directly in card-mod on a card instead of the theme file?).

[VNRARA]

Sadly no; I don't know how to reach hui-card from within a card. But doing it the theme-way is much better anyway imo. It saves you from having to add the same style to all cards. Only thing I need figure is to reach a card with a class set by card_mod.