Custom Button viel zu breit

[Misux]

Hi!

Ich habe mir mal eine Custom Button Card erstellt welche mir nur einen Knopf darstellen soll. Das klappt auch soweit, aber die Karte ist viiiiiel breiter als der Button…

Was mache ich falsch? Der Button soll doch einfach nur so breit sein wie der Button halt…

Hier der Code:

type: custom:button-card
show_name: true
entity: sensor.papier
name: Papier
theme: Graphite Light
show_state: true
show_entity_picture: true
entity_picture: /local/pictures/Papier.png
size: 25%
styles:
  card:
    - height: 120px
    - width: 150px

[SebastianVoigt]

Setz mal folgendes ans Ende:

grid_options:
  columns: 6
  rows: 1

[Misux]

@SebastianVoigt

grid_options:
  columns: 6
  rows: 1

Jaa! Vielen Dank!

Ich versuche nich das Theme “Garphite Light” anzuwenden… Leider klappt das auch nicht.

Wie muss das denn aussehen damit das klappt? Habe schon einige Einrückungen und stellen versucht…
Ist immer schwarz obwohl Theme drin ist…

type: custom:button-card
show_name: true
entity: sensor.papier
name: Papier
theme: Graphite Light
show_state: true
show_entity_picture: true
entity_picture: /local/pictures/Papier.png
size: 25%
styles:
  card:
    - height: 120px
    - width: 125px
grid_options:
  columns: 3
  rows: 2
visibility:
  - condition: state
    entity: sensor.papier
    state: Heute
  - condition: state
    entity: sensor.papier
    state: Morgen

[SebastianVoigt]

Normal ist es so richtig, aber bei der Custom Button Card bin ich mir nicht sicher, ob es bei der überhaupt so geht.

[Misux]

OK, Kein Problem… Habe mit Color Picker einfach die richte Farbe als Hintergrund genommen.

Jetzt aber mal ein anderes Problem…

Die Custom Card ist irgendwie auf jedem anderen Gerät unterschiedlich groß! Aufm Laptop, Handy Andere Tablets immer unterschiedliche größe…

Wenn ich aufm LAptop das Browserfenster verkleinere oder vergrößere tun das alle anderen Karten auch ABER nicht die Custom Card.

Lässt sich das irgendwie einstellen das das auch immer auf allen Geräten passt?

So sieht jetzt der Button aus…

type: custom:button-card
show_name: false
entity: input_select.schicht
name: Schicht
size: 40%
styles:
  card:
    - color: rgb(0, 0, 0)
    - background-color: rgb(247, 247, 248)
    - border-radius: 20px
    - height: 100px
    - width: 100px
    - padding: 8%
grid_options:
  columns: 3
  rows: 2
show_state: true
show_entity_picture: true
state:
  - value: Früh
    entity_picture: /local/pictures/Frueh.png
  - value: Normal
    entity_picture: /local/pictures/Normal.png
  - value: Abwesend
    entity_picture: /local/pictures/Abwesend.png
  - value: Urlaub
    entity_picture: /local/pictures/Urlaub.png

Und das ist die Rasterkarte wo der button mit den normalen drin ist:

type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.hm_lc_sw2pbu_fm_peq0195996_ch2
    name: Decke
    icon: hue:double-spot
    theme: Graphite Light
    show_state: false
    icon_height: 60px
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.hm_lc_sw2pbu_fm_peq0195996_ch1
    name: Tisch
    icon: mdi:table-chair
    theme: Graphite Light
    show_state: false
    icon_height: 60px
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    name: Drucker
    icon: mdi:printer
    theme: Graphite Light
    show_state: false
    entity: switch.bueroswitch2kanalzigbee_l2
    icon_height: 60px
  - type: custom:button-card
    show_name: false
    entity: input_select.schicht
    name: Schicht
    size: 40%
    styles:
      card:
        - color: rgb(0, 0, 0)
        - background-color: rgb(247, 247, 248)
        - border-radius: 20px
        - height: 100px
        - width: 100px
        - padding: 8%
    grid_options:
      columns: 3
      rows: 2
    show_state: true
    show_entity_picture: true
    state:
      - value: Früh
        entity_picture: /local/pictures/Frueh.png
      - value: Normal
        entity_picture: /local/pictures/Normal.png
      - value: Abwesend
        entity_picture: /local/pictures/Abwesend.png
      - value: Urlaub
        entity_picture: /local/pictures/Urlaub.png
columns: 4
layout_options:
  grid_columns: 4
  grid_rows: 2

[SebastianVoigt]

@Misux

height: 100px

Ich denke das wird mit der Höhe in Pixeln zu tun haben.
Versuch es mal ohne.

[Misux]

Nee, habe schon alle Varianten versucht… Wenn ich beides oder nur Height weglasse ist die Karte immer klein.

[SebastianVoigt]

Hmm… dann bin ich aktuell überfragt.
Habe damit noch nicht so viel gemacht.