#Horizontal-stack error: Configuration errorNo type provided. Trying my first horizontal stack

1 messages · Page 1 of 1 (latest)

chrome summit
#

getting this error by copying into new custom: button-card;

  • type: horizontal-stack
    cards:
    • type: 'custom:button-card'
      entity: binary_sensor.starlink_connectivity
      color: auto
      name: s:default h:200px
      styles:
      card:
      - height: 200px
    • type: 'custom:button-card'
      entity: sensor.starlink_ping
      color_type: card
      color: auto
      name: s:100% h:200px
      size: 100%
      styles:
      card:
      - height: 200px
    • type: 'custom:button-card'
      entity: sensor.starlink_upload
      color_type: card
      color: auto
      size: 10%
      name: s:10% h:200px
      styles:
      card:
      - height: 200px

likely something very simple I'm missing.
Any help appreciated!

void carbonBOT
#

To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks.
```yaml
example: here
```
Don't forget you can edit your post rather than repeatedly posting the same thing.

blissful ridge
#

It is hard to tell where your problem is because your code is not properly formatted, but if I would have to assume it looks like your second custom:button-card is not indented properly.

#

It should look something like this (I had to use my own entities to get it to render properly): ```yaml
type: horizontal-stack
cards:

  • type: custom:button-card
    entity: binary_sensor.living_room_door_on_off
    color: auto
    name: s:default h:200px
    styles:
    card:
    - height: 200px
  • type: custom:button-card
    entity: sensor.s25_ultra_battery_level
    color_type: card
    color: auto
    name: s:100% h:200px
    size: 100%
    styles:
    card:
    - height: 200px
  • type: custom:button-card
    entity: sensor.watch5_battery_level
    color_type: card
    color: auto
    size: 10%
    name: s:10% h:200px
    styles:
    card:
    - height: 200px
chrome summit
#

Thanks for the quick response! Here is a clip of the code. I'm still not seeing what I did wrong...

blissful ridge
#

Easy fix. Line 1. Remove the dash and the space. (The first two characters of that line.) Highlight line 2 and everything to the end. Press SHIFT+TAB once.

#

I should have caught that from your code snippet but I think I just corrected it automatically figuring it was a formatting issue.

chrome summit
#

Thanks! Worked!... but doesn't that really push the '- type' too far in?

blissful ridge
#

For which line? Line 1? The - is basically used to define a section based off the higher level items. (If that makes sense.) Line 1 is the higher level item and therefore cannot use/need the - .

chrome summit
#

I just shift-tab the rest and it worked and looked appropriate for indentation. Thanks much! Love this stuff!

blissful ridge
#

Some of the documentation for custom:button-card is confusing because it incorrectly shows using the - on the first line sometimes.

chrome summit
#

yes, that's where I got it. still getting a bit confused with indentation and when to use '-'. But I'm learning!

#

Thanks again!

blissful ridge
#

I'm pretty confident, especially when using the visual editor, Line 1 will not have a dash.

chrome summit
#

Got it working last night! You guidance helped. thanks! Now I need to track down why it (custom: button-card won't show up on one of my displays (pi3 with DietPi OS). all other cards show up... shows as a red '!'.

blissful ridge
#

Try refreshing the browser/app. If that doesn't work, clear its cache. There's a pinned thread with some info.