Custom:button-card → proportions différentes WEB vs Companion

Entraide Home Assistant
1

Bonjour à tous :wink:
J’ai défini une carte dans mon dashboard qui réunit tout ce dont j’ai besoin pour mon extracteur d’air de la salle de bain.
Je l’ai fait avec custom:button-card.
L’affichage dans l’app Companion est comme je le souhaite.

cusbutcardextr
cusbutcardextr1080×2412 375 KB

Mais dans mon dashboard, la carte ne s’affiche pas pareil
cusbutcardextr

Il y a comme qui dirait, un problème de proportion avec la carte custom:button-card script.manu_extract_sdb qui est dans les custom_fields.
Sans doute l’erreur est dans la manière dont je dimensionne et positionne les éléments de cette carte.

Voici le code :

type: custom:button-card
entity: switch.module_extracteur_sdb_tuya
icon: mdi:fan
name: Extracteur SDB
aspect_ratio: 2/1
styles:
  name:
    - font-weight: bold
    - position: absolute
    - left: 10%
    - top: 10%
    - animation: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "blink 1s infinite";
        ]]]
    - color: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "red";
          return "gray";
        ]]]
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
    - align-self: stretch
    - text-align: stretch
    - position: absolute
    - left: 10%
    - top: 22%
    - width: 60%
    - height: 60%
  icon:
    - animation: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "rotating 0.5s linear infinite";
        ]]]
    - color: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "red";
          return "gray";
        ]]]
  custom_fields:
    humidity:
      - position: absolute
      - left: 5%
      - top: 85%
    tempsrelance:
      - position: absolute
      - left: 50%
      - top: 20%
    relance:
      - left: 40%
      - top: 40%
custom_fields:
  tempsrelance:
    card:
      type: custom:slider-entity-row
      entity: input_number.temps_relance_extract_sdb
      full_row: true
      hide_state: false
    overflow: unset
  relance:
    card:
      type: custom:button-card
      entity: script.manu_extract_sdb
      icon: mdi:fan-clock
      card_mod:
        style: |
          ha-card {
            border: none;
          }
      show_name: false
      size: 30%
      hold_action:
        action: call-service
        service: script.toggle
        service_data:
          entity_id: script.manu_extract_sdb
  humidity: |
    [[[
      return `<ha-icon
        icon="mdi:water-percent"
        style="width: 25px; height: 25px; color: yellow;">
        </ha-icon><span> ${states['sensor.sonde_temp_humid_sdb_tuya_humidity'].state} %  vs ${states['sensor.sonde_temp_humid_samtjrs_tuya_humidity'].state} %</span>`
    ]]]

J’avoue que je ne comprends pas encore toutes les subtilités des paramètres que j’ai mis dans cette carte. :smirk: