Problem mit yaml Code für eine Bildelementekarte

[stemo]

Hallo und guten Abend,

ich hoffe ihr könnt mir bei einem yaml Problem helfen. Ich habe für meine PV Anlage ein Energie-Dashboard erstellt. Um die Energieflüsse zu visualisieren enthält es verschiedene horizontale und vertikale Linien. Bei den vertikalen Linien habe ich jetzt das Problem, das ich die Länge der Linie nicht ändern kann. Unten der Code einer vertikalen Linie. Eigentlich sollte mit dem height: 35% Befehl in der letzten Zeile die Länge eingestellt werden können, aber die Linie verrutscht damit nur etwas, wird aber nicht länger. Könnt ihr mit hier weiterhelfen?

  - type: custom:button-card
    entity: sensor.powerocean_hj37zdh5zg7a0143_housepower
    show_name: false
    show_icon: false
    show_state: false
    custom_fields:
      line: ' '
    styles:
      card:
        - background: rgba(0,0,0,0)
        - box-shadow: none
        - border: none
        - width: 8px
        - padding: 0px
      custom_fields:
        line:
          - width: 8px
          - height: 100%
          - background: |
              [[[
                let val = Number(entity.state);
                if (val > 0) return 'repeating-linear-gradient(0deg, #F44336 0px, #F44336 8px, transparent 8px, transparent 16px)';
                return '#FFD700';
              ]]]
          - background-size: 100% 32px
          - animation: |
              [[[
                let val = Number(entity.state);
                if (val > 0) return 'flow-down 0.8s linear infinite';
                return 'none';
              ]]]
    extra_styles: >
      @keyframes flow-down { 0% { background-position: 0 0; } 100% {
      background-position: 0 32px; } }
    style:
      top: 40%
      left: 48%
      height: 35%

 

[u5zzug]

Das ist kein yaml Problem, sndern ein css Problem.
top: 40% heißt wohl, dass die Linie erst bei 40 Prozent beginnt.

Weißt du, das es in HACS jede Menge Karten für PV u.ä. gibt?

 

[Nival]

Zum CSS, Du musst nur die Breite von card und line auf den gleichen Wert erhöhen - da dann aber border-radius ziemlich auffällt muss das ggf. noch eliminiert werden, sonst ist es eher eine Ellipse als ein Rechteck wie bisher.

styles:
  card:
    - width: 30px
    - border-radius: 0px
  custom_fields:
    line:
      - width: 30px