Hello everyone,
I would like to make a header and a footer for different views, and always have the same space between them, regardless of how high the cards are:
the footer should be at the bottom:
graphic
so that it is at the same height when browsing:
graphic
The space in between should then simply be black.
I tried using the layout card, but I can’t get it to work…
Regards, Stephan
maybe this will help you - google about “sticky”
Thanks for the tip, but is it possible that this only works with the Mushroom Chips Card?
type: horizontal-stack
card_mod:
style: |
ha-card { --chip-background: none; }
:host {
z-index: 2;
position: fixed;
bottom: 0
}
cards:
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:music
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-music/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:information-outline
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-information/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:gauge-low
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-diagnose/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:chart-line
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-statistik/ubersicht
styles:
icon:
- color: "#383838"
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:devices
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-gerate/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:cogs
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-einstellungen/ubersicht
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:home
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/home-floorplan/erdgeschoss
this did not work…
Not using mushrooms - but this is wrong
since the vertical/horizontal-stack card (& grid card) does not have a ha-card & thus needs a mod-card, check docs for card-mod.
Thank you, i got it!
type: custom:mod-card
style:
hui-horizontal-stack-card$: |
#root {
justify-content: center;
}
ha-card { --chip-background: none; }
:host {
z-index: 0;
position: fixed;
bottom: 0
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:music
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-music/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:information-outline
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-information/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:gauge-low
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-diagnose/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:chart-line
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-statistik/ubersicht
styles:
icon:
- color: "#383838"
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:devices
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-gerate/ubersicht
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:cogs
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/lovelace-einstellungen/ubersicht
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: light.living_room_lights
icon: mdi:home
color: auto
tap_action:
action: navigate
navigation_path: http://192.168.178.66:8123/home-floorplan/erdgeschoss
It doesn’t seem to be working properly:
Can I make it bigger and in the middle?