Lovelace card location

Configuration Frontend
,
1

Looking for some much needed help please!

I am trying to make a swipe card stick to the bottom of the page using card mod, to use as a navigation panel.

I have found you can do this with the custom mushroom cards using card mod,
But you can’t do it with any other custom or generic cards.

Does anybody know of a way to make the custom swipe card stick to the bottom of the page?

Thank you in advance for any help!

Smokey

2

I don’t think there is one. Dashboard cards are designed to cluster at the top of the screen - so that on (say) a laptop you might get three columns, on a tablet two and on a mobile one.

The only thing that sometimes works is to use vertical and horizontal stacks to create a grid of blank cards, forcing special cards to the bottom. Empty cards can be “hidden” with a transparent theme.

image
image632×787 100 KB

This is a vertical stack of grid cards, the grids containing buttons. The blank spaces are actually button cards with transparent backgrounds and borders. The vertical stack fills the screen so the media player cards are always in the same place at the bottom.

It’s a lot of work… :grinning:

3

Thank you for confirming,
I thought as much but I didnt want to do it that way as it will get very messy!
I wanted the middle section to swap out data depending on what tab was selected on the swipe card.

Looks like im back to drawing board :sweat_smile:

4

Would this new add-on be helpful?

5

Thank you!
I will look at this when I get time to work on it next.

6

I have found out how to do this,

I didnt know you could use Card mod as a type of card.

type: custom:mod-card
card_mod:
  style: |
    @media (min-width:100px) {
      ha-card {
        background: black;
        border-radius: 100px;
        position: fixed;
        bottom: 10px;
        z-index: 1;
        left: 10px;
        width: calc(100% - 20px);
        pading: 20px;
      }
    }
card:
  type: custom:swipe-card

This will create a bar across the bottom of the page ready for the slider card to be setup and the other cards to be added.

Hope this helps someone :slight_smile: