I’m changing my mobile UI a bit and I’d like to add a combination navigation/title bar. I’ve designed this with a custom-button card that resembles what I’m looking for:
I’ll share the code here, though it’s not relevant and really only demonstrates that I’ve had some past success using a grid-layout:
type: custom:button-card
aspect_ratio: 7/1
name: Navigation bar
show_entity_picture: true
show_name: false
styles:
card:
- background-color: var(--secondary-background-color);
- border-radius: 5%
- padding: 3%
- font-size: 24px
grid:
- grid-template-areas: "\"home back space title\""
- grid-template-columns: 55px 50px 20px auto
custom_fields:
home:
- justify-self: start
- color: var(--secondary-text-color)
- tap_action:
action: navigate
navigation_path: /xxxxs-iphone/entry_xxxxs_iphone
back:
- justify-self: end
- color: var(--secondary-text-color)
space:
- justify-self: start
- color: var(--primary-text-color)
title:
- justify-self: start
- color: var(--primary-text-color)
custom_fields:
home: >
<ha-icon icon="mdi:home-circle-outline" style="width: 50px; height:
450px;"></ha-icon>
back: >
<ha-icon icon="mdi:arrow-left-bold-circle-outline" style="width: 50px;
height: 450px;"></ha-icon>
title: WEATHER
card_mod:
style: |
ha-card {
background-color: var(--secondary-background-color);
}
Now, when I try to replicate this with a custom:grid-layout card so I can add individual (button & whatnot) cards to it, I get a wonky layout and I don’t know why. All of the cards are piled up in what appears to be the 3rd column:
Not sure why that is:
type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
grid-template-columns: 50px 50px auto
grid-template-rows: 80px
grid-template-areas: "home back title"
layout: {}
cards:
- type: custom:button-card
entity: lock.front_door_lock
name: Home
tap_action:
action: navigate
navigation_path: /xxxxs-iphone/entry_xxxxs_iphone
color_type: card
styles:
card:
- width: 50px
view_layout:
grid-area: home
- type: custom:button-card
name: Back
tap_action:
action: navigate
navigation_path: /xxxxs-iphone/entry_xxxxs_iphone
color_type: card
styles:
card:
- width: 50px
view_layout:
grid-area: back
- type: custom:button-card
name: LABEL
tap_action: none
color_type: card
view_layout:
grid-area: title
Any ideas?
EDIT: It just occurred to me that I haven’t used this card anywhere in my dashboard… and I’m doing it wrong. My column/row definitions need to be under the layout key, not under layout-options.
I’m on the right track now, I think…