search

custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.93k stars 233 forks source link

Failing to left align #832

Closed madbobmcjim closed 7 months ago

madbobmcjim commented 7 months ago

I'm trying to get the icon aligned to the left with the label text next to it. The Amp card is my button-card, and I'd like it to line up with the card above in the picture here: Screenshot_20240214_085845

My current code is:

type: custom:button-card
entity: switch.deskpower_l2
name: Amp
show_name: true
layout: icon_name
styles:
  card:
    - justify-self: start
    - align-items: start
  grid:
    - display: contents
  img_cell:
    - display: contents
  icon:
    - margin: 0em
    - margin-right: 2em
    - width: 20px
card_mod:
  style: |
    ha-card {
      font-family: Rajdhani;
    }

This dashboard is my first time working with CSS, so I'm unsure if I've got something wrong in my button code, or if there's something interfering from my template or even card_mod...

This issue: https://github.com/custom-cards/button-card/issues/744 helped me get this far.

madbobmcjim commented 7 months ago

Ok, I worked it out :-) I should have had justify-content not justify-self in the card.

type: custom:button-card
entity: switch.deskpower_l2
name: Amp
show_name: true
layout: icon_name
styles:
  card:
    - justify-content: start
    - align-items: start
  grid:
    - display: contents
  img_cell:
    - display: contents
  icon:
    - margin: 0em
    - margin-right: 1.5em
    - margin-left: 1.5em
    - width: 20px
card_mod:
  style: |
    ha-card {
      font-family: Rajdhani;
    }