Lovelace: column-card

thomasloven · July 30, 2018, 7:47pm

THIS CARD IS DEPRECATED

It’s replaced by layout-card

column-card

A lovelace card which contains other cards and display them as if they were not inside a card at all.

Why?

Lovelace automatically puts your cards in nice columns, the number of which are determined by the screen width:

A known trick to get a header bar to a view is to make the view a panel, and add the header via a vertial-stacḱ card. But then you lose the columns. The best you can get is a horizontal-stack, but that doesn’t adjust to the screen width.

Enter column-card. A card which takes other cards and display them in columns (Edit: Note the header bar below):

Example configuration

views:
  title: My view
  panel: true
  cards:
    - type: vertical-stack
      cards:
        - type: glance
          title: Header of the view
          entities:
            - ...
        - type: custom:column-card
          cards:
            - type: entities
              title: Card1
              entities:
                - ...
            - type: entities
              title: Card2
              entities:
                - ...
            - type: entities
              title: Card3
              entities:
                - ...

Example use case

Here’s the same view on my iphone in portrait and landscape mode.
Note how the topmost card covers the whole witdh of the screen in both screenshots, while the other two cards (who are inside a column-card show up beside each other if there’s room enough, and below each other otherwise).

JTPublic · July 30, 2018, 8:23pm

Would you please show a screen shot of what the column-card would look like?
The 2 screen shots in your example were identical?
Thanks

thomasloven · July 31, 2018, 8:29am

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.

pauly7300 · August 14, 2018, 9:03pm

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

thomasloven · August 15, 2018, 8:46pm

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

JTPublic · August 15, 2018, 9:55pm

Now I get it, excellent!!
Works really great with my banner card on the phone.

nickchamberlin · August 16, 2018, 1:52am

You can’t just mention something called banner card and not show it! I need pictures

JTPublic · August 16, 2018, 1:55am

Here you go
banner

nickchamberlin · August 16, 2018, 2:37am

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:```

maedium · October 1, 2018, 7:19pm

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…

thomasloven · October 1, 2018, 7:22pm

I can’t see why not…

maedium · October 2, 2018, 8:11am

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

thomasloven · October 2, 2018, 8:41am

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

maedium · October 2, 2018, 11:27am

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

DavidFW1960 · October 19, 2018, 11:09pm

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?

thomasloven · October 20, 2018, 12:04am

Could you show your config and perhaps a screenshot?

DavidFW1960 · October 20, 2018, 12:22am

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…

DavidFW1960 · October 20, 2018, 2:00am

ah yanno what… I had changed the last version of the card to show line 94 <3 and updating reverted me to <5.

glyn · October 24, 2018, 9:13am

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.

thomasloven · October 24, 2018, 10:09am

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.