WTH why can't I pin the badges to the top so they're anchored at the top

Month of "What the heck?!"
1

WTH why can’t I pin the badges to the top so they’re anchored at the top.

It seems like something I could accomplish with custom CSS but I haven’t figured it out yet.

Edit: even if I scroll down, I’d like to see the badges at the top of the screen.

2

Sorry, unclear.
Badges are by default shown on the top.
image

3

I want them to stay at the top of my screen even if I scroll down.

4

You want them to be sticky, understood.

5

As a workaround - try this custom card-mod-theme:

test_badges_sticky:

  card-mod-theme: test_badges_sticky

  card-mod-view-yaml: |
    :first-child:not(hui-sections-view):
      $: |
        hui-view-badges {
          z-index: 2;
          position: sticky;
          top: calc(var(--header-height) + 8px);
        }
    hui-sections-view:
      $: |
        hui-view-badges {
          z-index: 2;
          position: sticky;
          top: var(--header-height);
        }

which creates sticky badges (works fine when a dashboard is not in an “edit mode”).
sti

Works at least in a Chrome+Win, iOS Companion App (iOS 15.x).

3 Likes