# Disposition des blocs dans une carte **URL:** \ **Category:** Entraide Home Assistant\ **Tags:** aide\ **Created:** [Novembre 25, 2024, 10:03 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239 "2024-11-25T10:03:14Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 25, 2024, 10:03 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/1 "2024-11-25T10:03:14Z")
Bonjour, Je souhaite incorporer dans une map où les blocs sont vertical, une ligne horizontale **Actuellement** ![Capture d’écran 2024-11-25 à 10.44.07](https://forum.hacf.fr/uploads/default/original/3X/a/8/a84ba66e09b1b33171b4fb5ba607daee81435ac5.png) **Ce que je voudrais faire** ![Capture d’écran 2024-11-25 à 10.39.24](https://forum.hacf.fr/uploads/default/original/3X/8/2/82f6e645cf33ccd0c7d9fa94811bac70f5c836c1.png) ## Ma configuration | version | core-2024.11.3 | | --- | --- | | installation\_type | Home Assistant OS | | dev | false | | hassio | true | | docker | true | | user | root | | virtualenv | false | | python\_version | 3.12.4 | | os\_name | Linux | | os\_version | 6.6.54-haos | | arch | x86\_64 | | timezone | Europe/Paris | | config\_dir | /config | > **Home Assistant Community Store** > > | GitHub API | ok | > | --- | --- | > | GitHub Content | ok | > | GitHub Web | ok | > | GitHub API Calls Remaining | 4921 | > | Installed Version | 1.34.0 | > | Stage | running | > | Available Repositories | 1457 | > | Downloaded Repositories | 13 | > **Home Assistant Cloud** > > | logged\_in | false | > | --- | --- | > | can\_reach\_cert\_server | ok | > | can\_reach\_cloud\_auth | ok | > | can\_reach\_cloud | ok | > **Home Assistant Supervisor** > > | host\_os | Home Assistant OS 13.2 | > | --- | --- | > | update\_channel | stable | > | supervisor\_version | supervisor-2024.11.4 | > | agent\_version | 1.6.0 | > | docker\_version | 27.2.0 | > | disk\_total | 30.8 GB | > | disk\_used | 6.7 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 | Terminal & SSH (9.15.0), Studio Code Server (5.17.3), Duck DNS (1.18.0), NGINX Home Assistant SSL proxy (3.11.1), File editor (5.8.0), Samba share (12.3.2), Let's Encrypt (5.2.3) | > **Dashboards** > > | dashboards | 3 | > | --- | --- | > | resources | 9 | > | views | 20 | > | mode | storage | > **Recorder** > > | oldest\_recorder\_run | 22 novembre 2024 à 16:42 | > | --- | --- | > | current\_recorder\_run | 25 novembre 2024 à 10:37 | > | estimated\_db\_size | 73.11 MiB | > | database\_engine | sqlite | > | database\_version | 3.45.3 | Voici les réglages de ma map ![Capture d’écran 2024-11-25 à 11.01.27](https://forum.hacf.fr/uploads/default/original/3X/f/a/fa42a8862e404801ea3c20f5c563e51ecc5b9622.png) Ainsi qu'un exemple de mes trois blocs de télécommande ```auto type: horizontal-stack cards: - type: vertical-stack cards: - type: vertical-stack title: LG cards: - type: horizontal-stack cards: - type: custom:button-card name: "1" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "1" styles: card: - width: 50px - height: 25px - background: grey - type: custom:button-card name: "2" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "2" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "3" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "3" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "4" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "4" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - background: grey - type: custom:button-card name: "5" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "5" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "6" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "6" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "7" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "7" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "8" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "8" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "9" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "9" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "0" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "0" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:power tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: power styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:arrow-down-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: chaine- styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-up tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: monter styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:arrow-up-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: chaine+ styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:menu-left tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: gauche styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: ok name: OK styles: card: - width: 50px - height: 25px - background: grey - type: custom:button-card icon: mdi:menu-right tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: droite styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-down styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:hdmi-port tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: hdmi styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:volume-minus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: volume- styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:volume-mute tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: mute styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:volume-plus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: volume+ styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command target: entity_id: remote.broadlink data: device: tv_lg command: - 1 - 6 entity: remote.broadlink name: Cnews styles: card: - width: 170px - height: 35px - background: grey icon: - width: 20px - height: 20px ``` Merci ---
**Author:** ![Pulpy-Luke](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pulpy-luke/32/137426_2.png) [@Pulpy-Luke](https://forum.hacf.fr/u/Pulpy-Luke)\ **Post date:** [Novembre 25, 2024, 10:44 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/2 "2024-11-25T10:44:45Z")
Salut Tu dois faire des combinaisons de carte ![image](https://forum.hacf.fr/uploads/default/original/3X/b/8/b806afe3dedc1549de163410c31b6006b9e9dcb1.png) Dans chaque bloc vert, tu mets tes telecommandes Dans le bloc bleu, test boutons AIWA ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 25, 2024, 4:28 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/3 "2024-11-25T16:28:06Z")
Voilà ce que réussi à faire ```auto type: vertical-stack cards: - type: horizontal-stack cards: - type: vertical-stack cards: - type: vertical-stack title: LG cards: - type: horizontal-stack cards: - type: custom:button-card icon: mdi:power - type: custom:button-card icon: mdi:volume-plus - type: custom:button-card icon: mdi:power - type: custom:button-card icon: mdi:volume-plus - type: horizontal-stack cards: - type: horizontal-stack cards: - type: vertical-stack title: LG cards: - type: horizontal-stack cards: - type: custom:button-card name: "1" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "1" styles: card: - width: 50px - height: 25px - background: grey - type: custom:button-card name: "2" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "2" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "3" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "3" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "4" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "4" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - background: grey - type: custom:button-card name: "5" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "5" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "6" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "6" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "7" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "7" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "8" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "8" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "9" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "9" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card name: "0" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: "0" styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:power tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: power styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:arrow-down-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: chaine- styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-up tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: monter styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:arrow-up-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: chaine+ styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:menu-left tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: gauche styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: ok name: OK styles: card: - width: 50px - height: 25px - background: grey - type: custom:button-card icon: mdi:menu-right tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: droite styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-down styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:hdmi-port tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: hdmi styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:volume-minus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: volume- styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:volume-mute tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: mute styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:volume-plus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_lg command: volume+ styles: card: - width: 50px - height: 25px - background: grey icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command target: entity_id: remote.broadlink data: device: tv_lg command: - 1 - 6 entity: remote.broadlink name: Cnews styles: card: - width: 170px - height: 35px - background: grey icon: - width: 20px - height: 20px - type: vertical-stack title: Samsung cards: - type: horizontal-stack cards: - type: custom:button-card name: "1" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "1" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "2" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "2" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "3" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "3" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "4" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "4" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "5" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "5" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "6" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "6" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "7" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "7" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "8" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "8" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "9" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "9" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: "0" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: "0" styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:power tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: power styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:arrow-down-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Chaine- styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-up tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Monter styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:arrow-up-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Chaine+ styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:menu-left tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: gauche styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card name: OK tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Ok styles: card: - width: 50px - height: 25px - background: green - type: custom:button-card icon: mdi:menu-right tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: droite styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:wifi tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: smart styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-down tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Descendre styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:hdmi-port tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: source styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:volume-minus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Volume- styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:volume-mute tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Mute styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:volume-plus tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.r4minisamsung device: tv_samsung command: Volume+ styles: card: - width: 50px - height: 25px - background: green icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command target: entity_id: remote.r4minisamsung data: device: tv_samsung command: - 1 - 6 name: Cnews styles: card: - width: 170px - height: 35px - background: green icon: - width: 20px - height: 20px - type: vertical-stack title: Philips cards: - type: horizontal-stack cards: - type: custom:button-card name: "1" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "1" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "2" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "2" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "3" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "3" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "4" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "4" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "5" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "5" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "6" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "6" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card name: "7" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "7" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "8" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "8" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "9" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "9" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Source styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card name: "0" tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: "0" styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:power tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: power styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:arrow-down-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Chaine- styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-up tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Monter styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:arrow-up-bold tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Chaine+ styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:menu-left tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: gauche styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Ok name: Ok styles: card: - width: 50px - height: 25px - type: custom:button-card icon: mdi:menu-right tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: droite styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card icon: mdi:cog tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Menu styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:menu-down tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Descendre styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card icon: mdi:hdmi-port tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Source styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Volume- icon: mdi:volume-minus styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Mute icon: mdi:volume-mute styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Volume+ icon: mdi:volume-plus styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: horizontal-stack cards: - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: HP command: volume- icon: mdi:volume-minus styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: tv_philips command: Mute name: HP styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command service_data: entity_id: remote.broadlink device: HP command: volume+ icon: mdi:volume-plus styles: card: - width: 50px - height: 25px icon: - width: 20px - height: 20px - type: custom:button-card tap_action: action: call-service service: remote.send_command target: entity_id: remote.broadlink data: device: tv_philips command: - 1 - 6 entity: remote.broadlink name: Cnews styles: card: - width: 170px - height: 35px icon: - width: 20px - height: 20px ``` Seulement je n'arrive pas à élargir les blocs, ils sont tous serrés l'un contre l'autre ![Capture d’écran 2024-11-25 à 17.27.36](https://forum.hacf.fr/uploads/default/original/3X/7/9/7974dbbf6475d41da4e8e36aa30db824031b3f2a.png) ---
**Author:** ![Pulpy-Luke](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pulpy-luke/32/137426_2.png) [@Pulpy-Luke](https://forum.hacf.fr/u/Pulpy-Luke)\ **Post date:** [Novembre 25, 2024, 6:54 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/4 "2024-11-25T18:54:34Z")
Tu vas sur le petit crayon à coté du titre de la page du dashboard et tu prends le mode "Panneau" ![image](https://forum.hacf.fr/uploads/default/original/3X/a/5/a575ac38aa2b15b0218d174d1f76ce0b51017b4b.png) ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 25, 2024, 7:17 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/5 "2024-11-25T19:17:16Z")
C'est un peu mieux mais pas centré ![Capture d’écran 2024-11-25 à 20.16.35](https://forum.hacf.fr/uploads/default/original/3X/9/3/936674eec091cbc3a256a34ba22c95770e7e48f8.png) ---
**Author:** ![BBE](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bbe/32/64915_2.png) [@BBE](https://forum.hacf.fr/u/BBE)\ **Post date:** [Novembre 26, 2024, 7:04 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/6 "2024-11-26T07:04:39Z")
J’arrive après la bataille et je ne serai pas très disponible pour t’aider… Mais tu peux également utiliser des sections pour faire ça : Une section par télécommande. Et pour la 4eme section tu définis sa largeur à 3 colonnes dans les paramètres de la section… Ça fera ce que tu veux si la largeur est suffisante et ça se mettra différemment si la largeur est trop faible. Personnellement c’est comme ça que je ferai pour moi ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 26, 2024, 2:49 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/7 "2024-11-26T14:49:51Z")
Tu as un exemple que je vois ? ---
**Author:** ![BBE](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bbe/32/64915_2.png) [@BBE](https://forum.hacf.fr/u/BBE)\ **Post date:** [Novembre 26, 2024, 3:05 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/8 "2024-11-26T15:05:04Z")
Tout est dans cet article: > [@\[Article\] Un beau dashboard, tout simplement](https://forum.hacf.fr/t/article-un-beau-dashboard-tout-simplement/51487): > > Bonjour à tous les passionnés de Home Assistant ! J’ai le plaisir de partager avec vous un nouvel article pour la communauté sur l’élaboration de votre tableau de bord. Dans cet article je vous accompagne pas à pas dans l’élaboration d’un dashboard simple et coloré, tout à fait simplement et sans avoir besoin d’utiliser le YAML… Plutôt destiné aux débutants, cet article sera aussi utile pour ceux qui voudraient découvrir les formidables nouvelles capacités offertes par les sections, les car… Normalement il y a tout pour y arriver tout seul… J’essaierai de te faire un exemple ce soir si tu ne t’en sors pas. ---
**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\ **Post date:** [Novembre 26, 2024, 4:00 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/9 "2024-11-26T16:00:04Z")
Bonjour @sg72, tu crées une page en vue section avec 3 colonnes : ![image](https://forum.hacf.fr/uploads/default/original/3X/2/9/295f1e260e88e18d0545e01b4b3707bfcecdef24.png) ![image](https://forum.hacf.fr/uploads/default/original/3X/a/e/ae8a434800da18e2ff2197284b9023dc5a7bd348.png) et tu mets une colonne sur la largeur de 3 colonnes : ![image](https://forum.hacf.fr/uploads/default/original/3X/b/b/bb2ae26dc43a8f1e42d7af691ac251f6323955db.png) les 3 autres colonnes sur 1 colonne. ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 26, 2024, 4:58 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/10 "2024-11-26T16:58:22Z")
Super ce système ! Seulement j'ai toujours mon problème de largeur ![Capture d’écran 2024-11-26 à 17.56.53](https://forum.hacf.fr/uploads/default/original/3X/c/c/cc73eb06f9a8261fdaa264b966f877acb46e6a1b.png) Surtout sur Tablette ![Capture d’écran 2024-11-26 à 17.58.08](https://forum.hacf.fr/uploads/default/original/3X/6/a/6a131174b3413c2d7fb12bbc1cf541758f458ef8.jpeg) Comment je peux déterminer ou personnaliser la largeur des blocs ? ---
**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\ **Post date:** [Novembre 26, 2024, 5:52 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/11 "2024-11-26T17:52:56Z")
> [@sg72](#): > > Comment je peux déterminer ou personnaliser la largeur des blocs ? dans un thème. - Max width of a section: `ha-view-sections-column-max-width` (default: `500px`) - Min width of a section: `ha-view-sections-column-min-width` (default: `320px`) - Horizontal gap between sections: `ha-view-sections-column-gap` (default: `32px`) - Vertical gap between sections: `ha-view-sections-row-gap` (default: `8px`) - Horizontal gap between cards within a section: `ha-section-grid-column-gap` (default: `8px`) - Vertical gap between cards within a section: `ha-section-grid-row-gap` (default: `8px`) tu as ce sujet qui en parle et comment créer un thème: > [@Sections - alignement](https://forum.hacf.fr/t/sections-alignement/51334/4): > > Ah, cool ! merci pour l’info. edit: ok, j’ai trouvé l’info Max width of a section: ha-view-sections-column-max-width (default: 500px) Min width of a section: ha-view-sections-column-min-width (default: 320px) Horizontal gap between sections: ha-view-sections-column-gap (default: 32px) Vertical gap between sections: ha-view-sections-row-gap (default: 8px) Horizontal gap between cards within a section: ha-section-grid-column-gap (default: 8px) Vertical gap between cards within a section: ha-s… ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 26, 2024, 7:04 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/12 "2024-11-26T19:04:51Z")
Excuse-moi mais je vois pas où mettre ```auto ha-view-sections-column-min-width: 300px ``` ---
**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\ **Post date:** [Novembre 27, 2024, 12:28 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/13 "2024-11-27T00:28:33Z")
Il te faut créer un thème et y mettre la ligne de code . > [@sg72](#): > > ```auto > ha-view-sections-column-min-width: 300px > > ``` Tu as des explications sur ces messages : > [@Sections - alignement](https://forum.hacf.fr/t/sections-alignement/51334/8): > > Alors je suis pas le mieux plaçé pour ça mais basiquement ça s’ajoute dans configuration . YAML ou dans un fichier à part… Perso j’ai un include dans mon configuration.yaml: # Theme et couleurs tempo (bleu blanc rouge). frontend: themes: !include themes.yaml puis un fichier themes.yaml: day\_and\_night: primary-color: "#264269" modes: light: energy-grid-consumption-color-5: "#00008B" energy-grid-consumption-color-4: "#0000FF" energy-grid-consumption-color-3: "#8B8B8… > [@Sections - alignement](https://forum.hacf.fr/t/sections-alignement/51334/9): > > Tu ajoutes ça dans configuration.yaml: frontend: themes: !include\_dir\_merge\_named themes Tu crées un dossier themes dans /config. Puis un dossier avec un nom du thème et tu crées un fichier au nom du thème en yaml. exemple du mobile.yaml mobile: #energy energy-grid-consumption-color-0: '#FF0000' energy-grid-consumption-color-1: '#00b300' paper-item-icon-color: '#808080' #mushroom chip mush-chip-icon-size: 23px mush-chip-background: rgba(158,158,158,0.2) … ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 28, 2024, 2:42 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/14 "2024-11-28T14:42:56Z")
J'ai donc créé un thème que j'ai emporté dans themes.yaml mais après comment on le sélectionne ? ![Capture d’écran 2024-11-28 à 15.42.38](https://forum.hacf.fr/uploads/default/original/3X/2/1/21d4c9189b726f0a7bfef2c402466dc4e08e14c2.jpeg) ---
**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\ **Post date:** [Novembre 28, 2024, 2:52 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/15 "2024-11-28T14:52:12Z")
> [@sg72](#): > > J’ai donc créé un thème que j’ai emporté dans themes.yaml mais après comment on le sélectionne ? Va dans ton profil : ![image](https://forum.hacf.fr/uploads/default/original/3X/7/6/760cdf7ed8a8903419f167ac070ca819264201ea.png) ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 28, 2024, 2:55 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/16 "2024-11-28T14:55:17Z")
ok mais après ? il se cache où ^^ ---
**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\ **Post date:** [Novembre 28, 2024, 2:57 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/17 "2024-11-28T14:57:13Z")
Il faut le sélectionner dans la liste, dans la partie thème dans profil. ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 28, 2024, 2:57 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/18 "2024-11-28T14:57:41Z")
Ça c’est OK mais après ? ---
**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\ **Post date:** [Novembre 28, 2024, 2:58 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/19 "2024-11-28T14:58:48Z")
C'est tout, si tu as appliqué des dimensions différentes pour les colonnes des sections, ça s'applique directement. ![image](https://forum.hacf.fr/uploads/default/original/3X/8/2/828ed70d011a7c0a2029757b9fd2b3f653a07b5c.png) > [@sg72](#): > > `ha-view-sections-column-min-width: 300px` Utilise plutôt le max-width. Si tu modifies le thème, pour le recharger, utilise l'action `frontend.reload_themes` : ![image](https://forum.hacf.fr/uploads/default/original/3X/2/a/2a85cf8ac87ee065099583de7f2ae1c5892e378b.png) ---
**Author:** ![sg72](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/s/ecccb3/32.png) [@sg72](https://forum.hacf.fr/u/sg72)\ **Post date:** [Novembre 30, 2024, 8:47 UTC](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239/20 "2024-11-30T08:47:02Z")
Bonjour Je reviens vers vous, car je n'arrive pas à déterminer une largeur maximum de 250 par bloc, tout en centrant les trois blocs ! Voici les thèmes que j'ai créé ```auto bloctv: ha-view-sections-column-min-width: 250px ha-view-sections-column-max-width: 750px modes: light: {} dark: {} ``` Cependant, malgré ce réglage, par exemple, sur ma tablette, les trois blocs ne sont pas alignés horizontalement ![Capture d’écran 2024-11-30 à 09.43.07](https://forum.hacf.fr/uploads/default/original/3X/f/6/f63fd4deb5731f8482a10c7de86dfb27e90e7073.jpeg) Et sur mon ordinateur, ils ne sont pas du tout centré ![Capture d’écran 2024-11-30 à 09.29.18](https://forum.hacf.fr/uploads/default/original/3X/3/b/3b0e4085c70ecce64b40c8f4fb117d58702d7a20.png) Si je regarde l'inspecteur d'éléments du navigateur, je vois que ha-sortable détermine le bloc entier. Je me trompe ? ![Capture d’écran 2024-11-30 à 09.46.06](https://forum.hacf.fr/uploads/default/original/3X/5/0/5098aaef21011e8164515d8ec86f6412ffecc075.jpeg) Car sauf erreur de ma part, le thème que j'ai créé, il devrait être en action et affiché dans la partie container de l'Imprim écran ci-dessous ? ![Capture d’écran 2024-11-30 à 10.58.38](https://forum.hacf.fr/uploads/default/original/3X/0/b/0b9a5f02238d713aa9918efb059cbcab82aa6cb3.jpeg) [Page suivante](https://forum.hacf.fr/t/disposition-des-blocs-dans-une-carte/52239.md?page=2)