The second screenshot has a header bar as well - containing the gear symbol.
Besides that, they are equal. That’s the whole point. That can’t be done without column-card.
2 Likes
My apologies but i’m trying my best to understand the value in this and I’m struggling to see the benefit. It’s throwing me off that the two screen shots look are identical other than the gear icon header.
You state the following:
“A lovelace card which contains other cards and display them as if they were not inside a card at all.”
Why is this helpful? Maybe I would expect the picture to reflect the visual evidence of why this is useful. At the moment, it appears that the net effect of this card type is that you’ve created a way to have sub-navigation bars. And maybe that’s your point. If that’s the value, then maybe the name is what i’m struggling with.
Thanks
Ok.
I added two more pictures to the top post to show a use case.
The header thing is described here: https://www.home-assistant.io/lovelace/tips/#header-using-panel-and-stacks
Now I get it, excellent!!
Works really great with my banner card on the phone.
You can’t just mention something called banner card and not show it! 
I need pictures
Thomas could you make it so we can set the column width through
- type: custom:column-card
Colum-width: 200px
cards:
- type: entities
title: Card1
entities:```
1 Like
Great stuff! I guess you cannot combine the “Header” with conditional cards (https://www.home-assistant.io/lovelace/conditional/) or Entity filters (https://www.home-assistant.io/lovelace/entity-filter/) can you?
I would like to show only people that are home in the header…
I can’t see why not…
Ah, really? I tried to, but didn’t really understand how to combine the type: vertical-stack with type: entity-filter.
I got the Entity-filter working in the header, but then all the other columns below wouldn’t show.
Has anyone got this working?
Thanks, Randy
I haven’t tried it, but roughly it would probably be something like this:
views:
- title: my view
panel:true
cards:
- type: vertical-stack
cards:
- type: entity-filter
entities: ...
state_filter ...
card:
type: glance
- type: custom:column-card
cards:
- ...Whatever you want below the header...
The entity filter and glance card would not be inside the column-card, so if it doesn’t work, at least it’s not my fault
Yes, it works, thanks! I must have made the error of F5-ing, instead of refreshing with the menu, because with F5 you get some red lovelace-errors
Column card has stopped working - like it’s not even there? I have a column card with normally 3 columns but now in 0.80.3 there are only 2 columns just like if it was not there?
Could you show your config and perhaps a screenshot?
title: Home
resources:
- url: /local/tracker-card.js?v=0.1.5
type: js
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.1
type: js
- url: /local/custom_ui/dark-sky-weather-card.js?v=1
type: js
- url: /local/mini-media-player.js?ver=0.8.7
type: module
- url: /local/column-card.js?ver=e7fb09
type: js
views:
.
.
.
- title: TV & Movies
icon: mdi:kodi
panel: true
cards:
- type: custom:column-card
cards:
- type: custom:upcoming-media-card
service: radarr
.
.
.
- type: custom:upcoming-media-card
service: sonarr
.
.
.
- type: entities
title: Newsgroups
entities:
- heaps of sensors
It’s been 3 columns until today…
ah yanno what… I had changed the last version of the card to show line 94 <3 and updating reverted me to <5.
No matter what I do I always seem to get the cards in a single column rather than 2 when the screen is wide enough:-
Here is the relevant ui-lovelace.yaml
- title: Test
id: Test
panel: true
cards:
- type: vertical-stack
cards:
- type: glance
title: header
entities:
- light.living_room_lights
- type: custom:column-card
cards:
- type: entities
show_header_toggle: false
entities:
- entity: light.aeotec_zw111_nano_dimmer_level_2
name: Ceiling
- entity: light.dining
name: Dining
- entity: light.lounge
name: Lounge
- type: entities
show_header_toggle: false
entities:
- entity: light.aeotec_zw111_nano_dimmer_level_2
name: Ceiling
- entity: light.dining
name: Dining
- entity: light.lounge
name: Lounge
Really not sure what I am doing wrong.
That’s the way lovelace sorts cards. Cards will be added to the first available column with less than 5 rows, or if no columns are empty to the shortest one.
Add two more things to your first card, and the second should move to the next column.
If you want to change this behavior, the relevant line in column-card.js is 94.
Thanks Thomas, you do not know how long I have been trying to get that working!
@thomasloven After update HA to 0.81.1 every entities card in column-card (with panel: true) has invalid style for card title.
Glance card (left side) has correct styled title but entities card (right side) not.
My config:
- id: home
icon: mdi:home
title: 'Pomieszczenia'
panel: true
cards:
- type: custom:column-card
cards:
- type: glance
title: 'Salon'
show_name: false
column_width: calc(100% / 4)
entities:
- sensor.temperature_salon
- sensor.humidity_salon
- sensor.co2_salon
- sensor.illumination_salon
- type: entities
title: 'Pracownia'
show_header_toggle: false
entities:
- sensor.temperature_pracownia
- sensor.humidity_pracownia
- binary_sensor.balcony_door_pracownia
Any solution for that?