position: sticky doesn't work #380
Comments
|
It's doesn't work for me with stack-in-card AND grid. |
|
Seems in 2024.7 this is completely busted too. |
|
Yes, now position: sticky doesn't work in grid |
|
Great, suddenly my personalized menu no longer has any interest (especially with its blur effect)... I'm disgusted PS: I tried replacing 'sticky' with 'fixed' but I don't have a great result at the moment |
|
Changing to fixed puts the sticky back, but there's no width control |
|
And is it an HA bug or is it a voluntary modification? |
|
nothing new ? |
|
Did anyone find a fix for this (other than using Fixed doesn't behave the same as sticky, I've tried so many things now and asked everywhere on the forums and official HA channels, but no one seems to have an answer (or no one even answers at all). |
|
@thomasloven , if I rightly understand, developers of HA have changed root element. And now :host refers to ha-card, but we need to use hui-card. |
|
@AINER did you find anything in the meantime? I am really baffled that no one has an answer to this and on the HA forums and discord they don't even react to this question at all. As in, it is completely ignored. |
|
@jimz011 Nope. To solve this problem, it appears that the add-on logic needs to be changed to use CSS styles with the hui-card element. Then this will work. But this element cannot be used now. Only Thomas can help here. Or someone of the TS developers can fork the project and try to fix it in their version of the add-on.
|
|
Actually, I think I have found somewhat of a solution (it would require some adjustments on your part). It seems that if you put the cards in a layout-card instead of a vertical or horizontal-stack that the sticky part simply works again. So instead of doing: - type: vertical-stack
cards:
- type: markdown
card_mod:
style: |
:host {
position: sticky;
top: 0;
z-index: 1;
}
content: NOT STICKYYou do this: - type: custom:layout-card
cards:
- type: markdown
card_mod:
style: |
:host {
position: sticky;
top: 0;
z-index: 1;
}
content: IS STICKYI hope this helps someone! |
This doesn't work for me. Core: 2024.9.2 |
|
Hm, that is weird. I have the same HA version and I just tried it on a second HA setup and it also works there. I tried multiple view setups (masonry, grid, panel, sections) it all seem to work there. Could you perhaps make a new dashboard (storage), create a new card and paste the following code to try? type: custom:layout-card
cards:
- type: entities
entities:
- light.office
card_mod:
style: |
:host {
position: sticky;
top: 0;
z-index: 10;
}
- type: custom:layout-card
view_layout:
grid-area: main
layout_type: masonry
cards:
- type: markdown
content: test
- type: grid
cards:
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: markdown
content: test
- type: markdown
content: test
- type: markdown
content: test
- type: grid
cards:
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: markdown
content: test
- type: grid
cards:
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: markdown
content: test
- type: markdown
content: test
- type: markdown
content: test
- type: grid
cards:
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: markdown
content: test
- type: grid
cards:
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: markdown
content: test
- type: markdown
content: test
- type: markdown
content: test
- type: grid
cards:
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.office
- type: button
entity: light.officeI know it is a lot of useless code, but that way at least you can easily check if it works or not (just change the light entity to something you actually have).
When scrolling down the top card should stay at the top (note that the behaviour might be different if you use themes and/or hide the header via themes. So for testing purposes I would always advise to use no modifications at all of temporarily disable them. Also make sure to clear cache (or try an incognito window) after saving your project). For me it worked without a refresh, but your situation might be different. Let me know how it goes! |
|
ok it works from a new Dashboard with your code. However, it doesn't seem to work if I replace type:entities with type:custom:stack-in-card 😭 |
|
That shouldn't have worked either way as stack-in-card can't be styled with card-mod (or at least it isn't supposed to do that). type: custom:mod-card
card_mod:
style: |
:host {
position: sticky;
top: 0;
z-index: 1;
}
card:
type: custom:stack-in-card
cards: []I have not tested this, but I think this should work for you @Guizmos |
This doesn't work, in fact: this is my base setup already. I have my own menubar inside a vertical-stack. In order to use card-mod I had to use mod-card already. So your suggestion, is already how my setup is, which loses its sticky with HA 2024.9. Nesting this entire code inside a layout-card as you suggested also doesn't work btw. Edit: I switched to |
|
@ASNNetworks I think it is weird that it works for me (and I can assure that I don't have a cached version where sticky did work). When I nest them in a layout-card it works absolutely fine. Though I did like how fixed actually fixes the card (whereas with sticky it still moves a bit). I would like to know if you have issues with the sidebar on desktop (which was what I couldn't figure out when using |
My Home Assistant version: 2024.6.3
With one of the latest Home Assistant updates, the position: sticky property stopped working in some cases.
It works if you use it on a card that is in a grid.
But it doesn't work for stack-in-card, which is located in the main dashboard space
The text was updated successfully, but these errors were encountered: