Placement carte sur dashbord

[kumi57]

Bonjour,

Mon problème

Bonjour,

Est-ce que quelqu’un pourrait m’expliquer comment placer le contenu qui se trouve dans le rectangle jaune en bas de la page, mais centré sur les 4 colonnes ?

Merci d’avance pour votre aide !

Ma configuration

__## System Information

version	core-2026.1.3
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
container_arch	aarch64
user	root
virtualenv	false
python_version	3.13.11
os_name	Linux
os_version	6.12.47-haos-raspi
arch	aarch64
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	5000
Installed Version	2.0.5
Stage	running
Available Repositories	2675
Downloaded Repositories	23

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 17.0
update_channel	stable
supervisor_version	supervisor-2026.01.1
agent_version	1.8.1
docker_version	29.1.3
disk_total	57.9 GB
disk_used	22.9 GB
nameservers	192.168.1.254, 2001:861:2c30:920:46d4:54ff:fe8b:60b5
healthy	true
supported	true
host_connectivity	true
supervisor_connectivity	true
ntp_synchronized	true
virtualization
board	rpi5-64
supervisor_api	ok
version_api	ok
installed_addons	Tailscale (0.27.1), Advanced SSH & Web Terminal (23.0.0), Samba share (12.5.4), Mosquitto broker (6.5.2), Zigbee2MQTT (2.8.0-1), Studio Code Server (6.0.1), Linky (1.7.0), Piper (2.1.1), Speech-to-Phrase (1.4.1), Matter Server (8.2.2), Whisper (3.1.0)

Dashboards

dashboards	3
resources	21
views	1
mode	storage

Network Configuration

adapters	lo (disabled), end0 (enabled, default, auto), docker0 (disabled), hassio (disabled), veth211afaf (disabled), vethe0ba255 (disabled), vetha69d306 (disabled), vetheac02d8 (disabled), veth643c038 (disabled), veth2b222e1 (disabled), veth207c270 (disabled), veth689ceea (disabled)
ipv4_addresses	lo (127.0.0.1/8), end0 (192.168.1.83/24), docker0 (172.30.232.1/23), hassio (172.30.32.1/23), veth211afaf (), vethe0ba255 (), vetha69d306 (), vetheac02d8 (), veth643c038 (), veth2b222e1 (), veth207c270 (), veth689ceea ()
ipv6_addresses	lo (::1/128), end0 (2001:861:2c30:920:8743:81eb:6ac2:aec9/64, fe80::a089:eef5:6ae6:aa4c/64), docker0 (fe80::78d1:1eff:febc:6577/64), hassio (fe80::d478:32ff:fe5e:6d90/64), veth211afaf (fe80::3065:bbff:fe89:7a48/64), vethe0ba255 (fe80::45a:deff:fe30:8179/64), vetha69d306 (fe80::f43d:27ff:fee1:8d35/64), vetheac02d8 (fe80::90fd:c1ff:fe8a:6b58/64), veth643c038 (fe80::7cb8:ceff:feb2:9ea1/64), veth2b222e1 (fe80::64dc:3fff:fe50:e3f1/64), veth207c270 (fe80::44a:5ff:fe40:982e/64), veth689ceea (fe80::405a:69ff:fe8c:8583/64)
announce_addresses	192.168.1.83, 2001:861:2c30:920:8743:81eb:6ac2:aec9, fe80::a089:eef5:6ae6:aa4c

Recorder

oldest_recorder_run	7 juin 2025 à 21:41
current_recorder_run	3 février 2026 à 12:03
estimated_db_size	5.00 MiB
database_engine	sqlite
database_version	3.49.2

[freetronic]

Hello,

En sections ? mais ça implique d’ouvrir une autre section pour la mettre en dessous du reste sans doute. Attends d’autres avis, je ne maîtrise pas trop.

A voir éventuellement des empilements de cartes verticales et horizontales, mais vu qu’on ne sait pas trop où tu vas …

si tu veux placer comme tu veux, tu fais de la picture élément, tu gères l’emplacement des cartes avec un style de positionnement.

cdt

[kumi57]

Merci pour ton retour

[Tochy]

Si tu es en section, tu devrais trouver ça par là :

Un beau dashboard, tout simplement...

[BBE]

Et même là: la-mise-en-page

Attention la mise en page est séparée dans 3 endroits:

• la vue (on définit le nombre de sections max en largeur)
• la section (on définit le nombre de colonne max de la section - voire la pleine largeur)
• la carte (on définit la taille de la carte dans la section)

Dans ton cas avec une section pleine largeur à la fin ça devrait le faire…

Partage le code pour voir comment est fait ton dashboard… (mode d’emploi dans l’article aussi…)

[kumi57]

Merci pour ton retour et ton aide, voile code

views:
  - title: Home
    type: sections
    max_columns: 4
    icon: mdi:home
    sections:
      - type: grid
        cards:
          - name: XXXXXXXXXXXXXXXXXXXX
            height: null
            show_feels_like: false
            show_wind: true
            show_wind_gust: false
            show_wind_direction: false
            show_humidity: true
            show_min_temp: false
            show_hourly_forecast: false
            hourly_forecast_hours: 5
            show_daily_forecast: false
            daily_forecast_days: 5
            show_sunrise_sunset: true
            show_clock: true
            clock_position: top
            clock_format: 24h
            overlay_opacity: 0.3
            language: fr
            wind_speed_unit: kmh
            sunrise_entity: ''
            sunset_entity: ''
            type: custom:dynamic-weather-card
            entity: weather.forecast_maison
          - initial_view: listWeek
            type: calendar
            entities:
              - calendar.xxxxxxxxxxxxxxxxxxx@gmail;com
              - calendar.jours_feries_et_autres_fetes_en_france
              - calendar.famille
              - calendar.medecin
              - calendar.anniversaires
      - type: grid
        cards:
          - type: custom:power-flow-card-plus
            title: 🔆 SolarEdge – Flux d’énergie
            entities:
              solar:
                entity: sensor.solaredge_puissance_solaire
                name: Production
                display_zero_state: true
              home:
                entity: sensor.solaredge_consommation_delectricite
                name: Maison
              grid:
                entity: sensor.solaredge_puissance_du_reseau
                name: Réseau
                secondary_info:
                  entity: sensor.solaredge_energie_importee
            clickable_entities: true
            display_zero_lines: true
            use_new_flow_rate_model: true
            w_decimals: 0
            kw_decimals: 1
            min_flow_rate: 0.75
            max_flow_rate: 6
            min_expected_power: 0.01
            max_expected_power: 8000
            watt_threshold: 1000
            transparency_zero_lines: 0
            sort_individual_devices: false
    top_margin: false
    dense_section_placement: true
    cards: []

[BBE]

ben c’est quand même pas très compliqué:

exemple:

• tu as les paramètres de la vue en cliquant sur le crayon a coté de l’icone maison en haut dans ton bandeau:
  

  

• et les paramètres de la section en cliquant sur le petit crayon a coté de la poubelle dans chacune de tes sections (tu n’en as que deux, il faut donc en créer une troisième:
  

  

@kumi57

mais centré sur les 4 colonnes

J’ai mis largeur 4 du coup…

Et plutôt que de dupliquer tout le dashboard, tu peux dupliquer juste la vue (le code suivant) c’est plus pratique si tu as plusieurs vues…

type: sections
max_columns: 4
icon: mdi:home
sections:
  - type: grid
    cards:
      - name: XXXXXXXXXXXXXXXXXXXX
        height: null
        show_feels_like: false
        show_wind: true
        show_wind_gust: false
        show_wind_direction: false
        show_humidity: true
        show_min_temp: false
        show_hourly_forecast: false
        hourly_forecast_hours: 5
        show_daily_forecast: false
        daily_forecast_days: 5
        show_sunrise_sunset: true
        show_clock: true
        clock_position: top
        clock_format: 24h
        overlay_opacity: 0.3
        language: fr
        wind_speed_unit: kmh
        sunrise_entity: ""
        sunset_entity: ""
        type: custom:dynamic-weather-card
        entity: weather.forecast_maison
      - initial_view: listWeek
        type: calendar
        entities:
          - calendar.xxxxxxxxxxxxxxxxxxx@gmail;com
          - calendar.jours_feries_et_autres_fetes_en_france
          - calendar.famille
          - calendar.medecin
          - calendar.anniversaires
  - type: grid
    cards:
      - type: custom:power-flow-card-plus
        title: 🔆 SolarEdge – Flux d’énergie
        entities:
          solar:
            entity: sensor.solaredge_puissance_solaire
            name: Production
            display_zero_state: true
          home:
            entity: sensor.solaredge_consommation_delectricite
            name: Maison
          grid:
            entity: sensor.solaredge_puissance_du_reseau
            name: Réseau
            secondary_info:
              entity: sensor.solaredge_energie_importee
        clickable_entities: true
        display_zero_lines: true
        use_new_flow_rate_model: true
        w_decimals: 0
        kw_decimals: 1
        min_flow_rate: 0.75
        max_flow_rate: 6
        min_expected_power: 0.01
        max_expected_power: 8000
        watt_threshold: 1000
        transparency_zero_lines: 0
        sort_individual_devices: false
  - type: grid
    cards:
      - type: heading
        heading: New section
      - type: markdown
        content: >-
          The **Markdown** card allows you to write any text. You can style it
          **bold**, *italicized*, ~strikethrough~ etc. You can do images, links,
          and more.


          For more information see the [Markdown
          Cheatsheet](https://commonmark.org/help).
        grid_options:
          columns: 48
          rows: 2
    column_span: 4
top_margin: false
dense_section_placement: true
cards: []

en éditant la vue, puis les 3 points en haut et editer en yaml:

J’ai des erreurs car je n’ai pas tes entités mais ça illustre le résultat (J’ai mis largeur 4, c’est sans doute trop, 2 suffirait en fait):

sur mobile ou tablette la section « large » se réduit automatiquement à la largeur de l’écran:

[kumi57]

Je te remercie et remercie la communauté pour le partage de vos savoirs faire

Au top BBE