Réduire la largeur de la "boite"

Bonjour,

J’ai créé une button-card
J’arrive à réduire les composant sauf la partie de la « boite » inutilisée. (partie à droite du bouton)

Désolé pour les termes mais je suis novice

Merci

System Information

version core-2025.1.0
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.13.1
os_name Linux
os_version 6.6.66-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 4995
Installed Version 2.0.1
Stage running
Available Repositories 1493
Downloaded Repositories 23
Home Assistant Cloud
logged_in true
subscription_expiration 11 janvier 2025 à 01:00
relayer_connected true
relayer_region eu-central-1
remote_enabled true
remote_connected true
alexa_enabled true
google_enabled true
cloud_ice_servers_enabled true
remote_server eu-central-1-24.ui.nabu.casa
certificate_status ready
instance_id 7b656fa8baa44587b1e309ed7bed80f5
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 14.1
update_channel stable
supervisor_version supervisor-2024.12.3
agent_version 1.6.0
docker_version 27.2.0
disk_total 30.8 GB
disk_used 15.1 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization oracle
board ova
supervisor_api ok
version_api ok
installed_addons Matter Server (7.0.0), Mosquitto broker (6.4.1), Zigbee2MQTT (2.0.0-1), ZeroTier One (0.19.0), Studio Code Server (5.18.0), SomfyProtect2MQTT (2025.1.0), Rclone Backup (3.3.3), Get HACS (1.3.1), Node-RED (18.1.1), ESPHome Device Builder (2024.12.2), File editor (5.8.0), go2rtc (1.9.8), Frigate (0.14.1), MQTT IO (0.4.0)
Dashboards
dashboards 4
resources 13
views 9
mode storage
Recorder
oldest_recorder_run 23 décembre 2024 à 23:30
current_recorder_run 4 janvier 2025 à 12:54
estimated_db_size 103.77 MiB
database_engine sqlite
database_version 3.47.1

Bonjour,
tu pourrais mettre le code de la carte, pour qu’on puisse mieux t’aider.

désolé

show_name: true
show_icon: true
entity: switch.olivier_prise_1
icon: mdi:tree
name: Olivier
type: custom:button-card
show_state: false
state:
  - value: "on"
    name: ""
    color: green
  - value: "off"
    name: ""
    color: green
styles:
  card:
    - height: 105px
    - width: 130px
    - box-shadow: |
        [[[
          if (states['switch.olivier_prise_1'].state == "on") return "0px 0px 0px 2px red";
          else return "0px 0px 0px 2px black";
        ]]]
    - background-color: |
        [[[
          if (states['switch.olivier_prise_1'].state == "on") return "yellow";
          else return "white";
        ]]]
  icon:
    - left: 30%
    - top: 10%
tap_action:
  action: toggle
  ha_card:
    - height: 105px
    - null

Aucun soucis. C’est que tu es en mode édition :wink:

fait terminer en haut de la page
image

Et c’est bon.

Oui, oui je connais cela, mais je voulais pouvoir mettre un ou deux autres boutons à coté
:grinning:

J’ai fait un montage pour imager

utilise la carte grille ou horizontal



ou

tu fait ajouter une carte manuelm et colle ton code du button-card

:shushing_face:

Je vois pas désolé

exemple avec horizontal-stack:

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    entity: switch.0x50325ffffe304677
    icon: mdi:tree
    name: Olivier
    type: custom:button-card
    show_state: false
    state:
      - value: "on"
        name: ""
        color: green
      - value: "off"
        name: ""
        color: green
    styles:
      card:
        - height: 105px
        - width: 130px
        - box-shadow: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "0px 0px 0px 2px red";
              else return "0px 0px 0px 2px black";
            ]]]
        - background-color: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "yellow";
              else return "white";
            ]]]
      icon:
        - left: 30%
        - top: 10%
    tap_action:
      action: toggle
      ha_card:
        - height: 105px
        - null
  - show_name: true
    show_icon: true
    entity: switch.0x50325ffffe304677
    icon: mdi:tree
    name: Olivier
    type: custom:button-card
    show_state: false
    state:
      - value: "on"
        name: ""
        color: green
      - value: "off"
        name: ""
        color: green
    styles:
      card:
        - height: 105px
        - width: 130px
        - box-shadow: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "0px 0px 0px 2px red";
              else return "0px 0px 0px 2px black";
            ]]]
        - background-color: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "yellow";
              else return "white";
            ]]]
      icon:
        - left: 30%
        - top: 10%
    tap_action:
      action: toggle
      ha_card:
        - height: 105px
        - null
  - show_name: true
    show_icon: true
    entity: switch.0x50325ffffe304677
    icon: mdi:tree
    name: Olivier
    type: custom:button-card
    show_state: false
    state:
      - value: "on"
        name: ""
        color: green
      - value: "off"
        name: ""
        color: green
    styles:
      card:
        - height: 105px
        - width: 130px
        - box-shadow: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "0px 0px 0px 2px red";
              else return "0px 0px 0px 2px black";
            ]]]
        - background-color: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "yellow";
              else return "white";
            ]]]
      icon:
        - left: 30%
        - top: 10%
    tap_action:
      action: toggle
      ha_card:
        - height: 105px
        - null

exemple avec grille:

square: false
type: grid
cards:
  - show_name: true
    show_icon: true
    entity: switch.0x50325ffffe304677
    icon: mdi:tree
    name: Olivier
    type: custom:button-card
    show_state: false
    state:
      - value: "on"
        name: ""
        color: green
      - value: "off"
        name: ""
        color: green
    styles:
      card:
        - height: 105px
        - width: 130px
        - box-shadow: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "0px 0px 0px 2px red";
              else return "0px 0px 0px 2px black";
            ]]]
        - background-color: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "yellow";
              else return "white";
            ]]]
      icon:
        - left: 30%
        - top: 10%
    tap_action:
      action: toggle
      ha_card:
        - height: 105px
        - null
  - show_name: true
    show_icon: true
    entity: switch.0x50325ffffe304677
    icon: mdi:tree
    name: Olivier
    type: custom:button-card
    show_state: false
    state:
      - value: "on"
        name: ""
        color: green
      - value: "off"
        name: ""
        color: green
    styles:
      card:
        - height: 105px
        - width: 130px
        - box-shadow: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "0px 0px 0px 2px red";
              else return "0px 0px 0px 2px black";
            ]]]
        - background-color: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "yellow";
              else return "white";
            ]]]
      icon:
        - left: 30%
        - top: 10%
    tap_action:
      action: toggle
      ha_card:
        - height: 105px
        - null
  - show_name: true
    show_icon: true
    entity: switch.0x50325ffffe304677
    icon: mdi:tree
    name: Olivier
    type: custom:button-card
    show_state: false
    state:
      - value: "on"
        name: ""
        color: green
      - value: "off"
        name: ""
        color: green
    styles:
      card:
        - height: 105px
        - width: 130px
        - box-shadow: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "0px 0px 0px 2px red";
              else return "0px 0px 0px 2px black";
            ]]]
        - background-color: |
            [[[
              if (states['switch.0x50325ffffe304677'].state == "on") return "yellow";
              else return "white";
            ]]]
      icon:
        - left: 30%
        - top: 10%
    tap_action:
      action: toggle
      ha_card:
        - height: 105px
        - null
columns: 3

2 « J'aime »

C’est tout à fait ça !
Un grand merci pour ton aide
Bonne soirée

1 « J'aime »

Si c’est bon pour toi, passe ton sujet en résolu en cochant la case solution ( image ) sur le message qui te l’apporte.