Lovelace: column-card

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.

glyn · October 24, 2018, 10:16am

Thanks Thomas, you do not know how long I have been trying to get that working!

Bieniu · October 29, 2018, 10:23pm

@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?

thomasloven · October 30, 2018, 7:54am

I’m sorry. I cant’ seem to be able to reproduce this.

By the way column_width: is deprecated.
You should use columns: 4 instead - or rather yet just leave it out entirely.

Bieniu · October 31, 2018, 10:04am

It’s very strange but on my test system I can’t reproduce this issue either. However, on the main system, adding column-card broke titles style. The problem isn’t related to the browser cache. I clean the cache every time.

Steven_Rollason · November 3, 2018, 11:22am

I’m having trouble getting this card to work with the new Thermostat card.
With the following config:

- type: custom:column-card
  cards:
    - type: thermostat
      entity: climate.bedroom

it renders like this:

Have you got any idea what is happening here?

thomasloven · November 3, 2018, 1:37pm

Afraid not, but I’ve heard of the issue. Could you please post an issue on github to remind me for when I get the time to look at this?

Bieniu · November 6, 2018, 10:01pm

I found a way to reproduce this.
When the first card inside column-card is entity-filter with the entities card, all the entites card titles are invalid styled. The same issue occurs with the layout-card.

Example config:

views:
  - id: c9621a53bbc144f687b870575aade4ef
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
      - type: custom:layout-card
        cards:
          - type: entity-filter
            entities:
              - device_tracker.iphone
              - device_tracker.ipad
              - device_tracker.oneplus
            state_filter:
              - home
            card:
              type: entities
              title: 'W domu'
          - id: 47fe3813d353437f98b61740fa607cf4
            type: custom:monster-card
            show_empty: false
            card:
              type: entities
              title: 'Światła'
            show_header_toggle: false
            filter:
              include:
                - domain: light
              exclude:
                - entity_id: light.lamp_salon
                - entity_id: light.cabinet_antek
                - entity_id: light.leds_przedpokoj

thomasloven · November 7, 2018, 11:51am

Try with the latest version of layout-card. I haven’t tested, but I may have accidentally fixed this…

Bieniu · November 7, 2018, 1:47pm

Issue gone with latest version of th layout-card. Thank you.

AlexGreenUK · November 9, 2018, 4:18am

Hey,

I have tried searching around for how to add this custom card to my Home Assistant but have not had any luck.

Could someone point me in the right direction to add this new card style?

Thanks in advance

thomasloven · November 9, 2018, 7:47am

Before anything else: Don’t use column-card. Use layout-card.

How to add a custom card is described in the first page of the lovelace documentation, under the section “Custom Cards”

This also has a good description: https://github.com/ciotlosm/custom-lovelace

thomasloven · November 9, 2018, 7:52am

THIS CARD IS DEPRECATED

It’s replaced by layout-card

I can’t edit the first post in the topic anymore… ~~@fabaff can you do something? Locking the topic would be ok.~~ Thank you @rpitera.

petro · December 2, 2018, 4:09am

I understand this card was depreciated but it seems like the new card cannot create a bar at the top like the original. Is there a reason you depreciated it?

Chewee · December 19, 2018, 8:17am

@thomasloven Do you think it’s possible to be able to make columns different widths? So like column 1 and 2 are say 200px and 3rd column is say 400px?

thomasloven · January 11, 2020, 8:35pm

I really recommend reading through the entire readme before jumping into using layout-card - It’s tricky stuff to get right.
Particularly the second sentence of the Layouts section.

I also really recommend posting questions about layout-card in the forum thread for layout-card.