Problème positionnement de cards

Entraide Home Assistant
1

Bonjour,

Mon problème

Je débute sur home assistant et j’aimerais créer une carte à onglets pour les pièces de chaque étage. Pour chaque pièce je souhaite mettre

  • un icône redimensionné
  • des chips à la verticale sur le côte.

C’est relativement fonctionnel mais pas totalement.
Lors de la création de l’icône et de mes chips, ils apparaissent en dehors de ma carte.
Je dois les décaler avec left et top pour les positionner correctement
Le pb c’est que malgré ces déplacements HA considère que ces zones sont toujours prises et ça me décale la carte suivante
Il doit y avoir des pb de référence mais je ne sais pas comment m’y prendre

image
image554×304 7.14 KB

type: custom:tabbed-card
tabs:
  - attributes:
      label: RDC
      icon: mdi:home-floor-0
    card:
      type: custom:layout-card
      layout_type: grid
      layout:
        grid-template-columns: 250px 250px
        grid-auto-rows: 110px
        gap: 0px
        type: custom:vertical-stack-in-card
      cards:
        - type: custom:mushroom-template-card
          primary: Salon
          secondary: "{{ states('sensor.capteur_temperature_salon_temperature') }}°C"
          layout: vertical
          icon_color: var(--primary-color)
          tap_action:
            action: navigate
            navigation_path: /dashboard-test/hall
          features_position: bottom
          card_mod:
            style: |
              ha-card {
                position: relative;
                overflow: hidden;
                border-radius: 16px;
                height: 110px;
              }

              ha-card::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: -70px;
                top: 10px;
                width: 265px;
                height: 105px;
                background: #03A9F4;
                opacity: 0.2;
                border-top-right-radius: 150px;
                pointer-events: none;
              }
        - type: custom:button-card
          icon: mdi:sofa
          styles:
            card:
              - background: none
              - box-shadow: none
              - border: none
              - position: relative
              - left: "-248px"
              - top: 20px
              - width: 80px
              - height: 80px
            icon:
              - color: var(--primary-color)
              - width: 70px
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: light.lumieres
              icon: mdi:lightbulb
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                orange
                {% elif is_state(entity, 'off') %} 
                grey
                {% else %}
                grey
                {% endif %}
            - type: template
              entity: cover.volets_rdc
              icon: |-
                {% if is_state(entity, 'open') %} 
                mdi:window-shutter-open
                {% elif is_state(entity, 'closed') %} 
                mdi:window-shutter
                {% else %}
                mdi:window-shutter-alert
                {% endif %}
              icon_color: |-
                {% if is_state(entity, 'open') %} 
                grey
                {% elif is_state(entity, 'closed') %} 
                grey
                {% else %}
                orange
                {% endif %}
          card_mod:
            style:
              .: |
                ha-card {
                width: 5px;
                height: 100px;
                margin-left: 90%;
                top: -100px;
                background: none;
                --chip-border-width: 0;
                --chip-icon-size: 15px;
                --chip-height: 15px;
                }    
        - type: custom:mushroom-template-card
          entity: group.lumieres_salon
          icon: mdi:door
          primary: Hall
          secondary: "{{ states('sensor.capteur_temperature_salon_temperature') }}°C"
          tap_action:
            action: navigate
            navigation_path: /dashboard-test/hall
  - attributes:
      label: Étage
      icon: mdi:home-floor-1
    card:
      type: vertical-stack
      cards:
        - type: entities
          title: Chambre 1
          entities:
            - light.chambre1
        - type: entities
          title: Chambre 2
          entities:
            - light.chambre2

Ma configuration

[center]## System Information

version core-2026.1.2
installation_type Home Assistant Container
dev false
hassio false
docker true
container_arch amd64
user root
virtualenv false
python_version 3.13.11
os_name Linux
os_version 4.4.302+
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 5000
Installed Version 2.0.5
Stage running
Available Repositories 2933
Downloaded Repositories 16
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Dashboards
dashboards 4
resources 18
views 4
mode storage
Network Configuration
adapters lo (disabled), ovs_bond0 (enabled, default, auto), tun0 (disabled), docker-17cb4ae1 (disabled), docker-9d0db4ab (disabled), docker-ba3f72c0 (disabled), docker0 (disabled), docker-d4b10721 (disabled), docker-075b9965 (disabled), docker-3fdc112c (disabled), docker-c68d4c72 (disabled), docker476d1f8 (disabled), docker0dd20de (disabled), dockera69672d (disabled), dockerc545f08 (disabled), dockerfbf80df (disabled), docker1c17813 (disabled), docker7573430 (disabled), dockerd62e407 (disabled), docker5b05dd5 (disabled), docker0ccf421 (disabled), docker2fbc423 (disabled), docker86531bc (disabled), dockerc7f2b4a (disabled), docker336f676 (disabled)
ipv4_addresses lo (127.0.0.1/8), ovs_bond0 (192.168.1.15/24), tun0 (10.8.0.1/32), docker-17cb4ae1 (172.18.0.1/16), docker-9d0db4ab (172.20.0.1/16), docker-ba3f72c0 (172.19.0.1/16), docker0 (172.17.0.1/16), docker-d4b10721 (172.21.0.1/16), docker-075b9965 (172.26.0.1/16), docker-3fdc112c (172.22.0.1/16), docker-c68d4c72 (172.23.0.1/16), docker476d1f8 (), docker0dd20de (), dockera69672d (), dockerc545f08 (), dockerfbf80df (), docker1c17813 (), docker7573430 (), dockerd62e407 (), docker5b05dd5 (), docker0ccf421 (), docker2fbc423 (), docker86531bc (), dockerc7f2b4a (), docker336f676 ()
ipv6_addresses lo (::1/128), ovs_bond0 (2001:861:5607:b550:211:32ff:feba:1af7/64, 2001:861:5607:b550:8a73:9ebd:3a4e:bbcf/128, fe80::211:32ff:feba:1af7/64), tun0 (), docker-17cb4ae1 (fe80::42:b6ff:fe0d:4e07/64), docker-9d0db4ab (fe80::42:70ff:fe2c:a282/64), docker-ba3f72c0 (fe80::42:eff:fe2a:2da9/64), docker0 (fe80::42:68ff:fe99:b65a/64), docker-d4b10721 (fe80::42:c3ff:fea2:43ca/64), docker-075b9965 (fe80::42:3cff:fe4a:796f/64), docker-3fdc112c (fe80::42:afff:fe51:f82e/64), docker-c68d4c72 (fe80::42:bdff:fedc:9bd3/64), docker476d1f8 (fe80::50f8:a7ff:fef5:233d/64), docker0dd20de (fe80::f48f:eeff:feaa:af47/64), dockera69672d (fe80::d8fe:19ff:feba:6fde/64), dockerc545f08 (fe80::4a9:34ff:fee1:e74c/64), dockerfbf80df (fe80::b0d9:7eff:fe4f:2f1b/64), docker1c17813 (fe80::6c39:d2ff:fe2f:435f/64), docker7573430 (fe80::bcb4:a7ff:fe41:6893/64), dockerd62e407 (fe80::80a7:2eff:fe76:d8bd/64), docker5b05dd5 (fe80::fc35:3cff:fea3:7646/64), docker0ccf421 (fe80::4c14:56ff:fe38:aeca/64), docker2fbc423 (fe80::cce3:6ff:fef3:d862/64), docker86531bc (fe80::40d4:c5ff:fe6c:9657/64), dockerc7f2b4a (fe80::e808:2ff:fee9:6f99/64), docker336f676 (fe80::740f:86ff:fedc:6eb7/64)
announce_addresses 192.168.1.15, 2001:861:5607:b550:211:32ff:feba:1af7, 2001:861:5607:b550:8a73:9ebd:3a4e:bbcf, fe80::211:32ff:feba:1af7
Recorder
oldest_recorder_run 1 avril 2026 à 12:39
current_recorder_run 1 avril 2026 à 14:39
estimated_db_size 182.18 MiB
database_engine sqlite
database_version 3.49.2
[/center]
2

si quelqu’un peut m’aider ça serait vraiment super

3

Salut

Regarde ce sujet il y’a pas mal d”exemples et de variantes.

1 « J'aime »
4

J’ai l’impression que le soucis vient peut être de l’usage d’une tabbed card et d’une layout-card.

Je ne connais pas cette carte, ça donne quoi si tu utilises autre chose ou si tu testes morceau par morceau :

  • juste la layout card seule pour voir si tu arrives a faire la mise en page que tu veux…
  • la layout card dans la tabbed card

As tu besoin de la layout card ? une grid ou un vertical stack ne sont ils pas suffisants ?

1 « J'aime »
5

Surtout que layout-card est buggé depuis quelques mois et pas de maj en vue encore. Perso, je l’ai supprimé, marre d’attendre après thomasloven.

6

merci pour vos retours
sans la button-card ça fonctionnait

image
image361×383 13.5 KB

en reprenant le code sans la button-card la carte hall se décale mais les chips sortent complétement de la carte

image
image510×351 6.58 KB

en supprimant ensuite la carte chips, la carte hall prend la bonne place

image
image511×214 5.56 KB

en fait je n’arrive pas à intégrer ma button-card dans mes custom:vertical-stack-in-card

7

Tu es sur un truc hyper spécifique avec des empilements de cartes custom:
Mon avis perso, tu peux essayer de debugger pour que ça finisse par faire ce que tu veux, mais tu auras toujours une mise à jour qui va te flanquer tout ça par terre.

C’est une des raisons qui m’ont fait virer mes stack-in-crads, card-mod etc… pour être le plus proche possible de HA « basique ».

Donc mon conseil:
Avant de passer des heures à essayer de faire marcher ton architecture actuelle:

  • ne peux tu pas faire autrement (sous vue, section affichées de façon conditionnelles, etc…)
  • ne peux tu pas simplifier un peu la structure ?

Un exemple perso dans le concours en cours montre comment je suis passé d’une structure comme la tienne (template + chips dans une stack-in-card) à une structure plus simple (template + custom feature) => [ConcoursDash] Une room card entièrement configurable (+ tutos pour tous sans YAML)

8

au final en bidouillant un peu par miracle ça semble fonctionner (code ci-dessous)
j’espère que ça va tenir, sinon comme tu dis il faudra revoir tout ça

Je souhaiterais par ailleurs créer un template pour dupliquer la mise en forme pour mes autres pces et pour faciliter les mises à jours. Apparemment il y a decluttering pour ça, j’ai créé un fichier avec le template mais je ne sais pas comment l’intégrer à HA

image
image543×325 10.1 KB

type: custom:tabbed-card
tabs:
  - attributes:
      label: RDC
      icon: mdi:home-floor-0
    card:
      type: vertical-stack
      cards:
        - type: custom:gap-card
          height: 5
        - type: horizontal-stack
          cards:
            - type: custom:stack-in-card
              card_mod:
                style: |
                  ha-card {
                    height: 100px;
                    border-radius: 16px;
                    position: relative;
                    overflow: hidden;
                  }
              cards:
                - type: custom:mushroom-template-card
                  primary: Salon
                  secondary: >-
                    {{ states('sensor.capteur_temperature_salon_temperature')
                    }}°C
                  layout: vertical
                  icon_color: var(--primary-color)
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-test/hall
                  card_mod:
                    style: |
                      ha-card {
                        box-shadow: none;
                        top:30px;
                        --ha-card-border-width: 0;
                        --mushroom-card-border-width: 0;

                      }

                      ha-card::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: -70px;
                        top: -15px;
                        width: 265px;
                        height: 105px;
                        background: #03A9F4;
                        opacity: 0.2;
                        border-top-right-radius: 150px;
                        pointer-events: none;
                      }
                - type: custom:button-card
                  icon: mdi:sofa
                  styles:
                    card:
                      - position: absolute
                      - background: none
                      - box-shadow: none
                      - border: none
                      - width: 60px
                      - height: 60px
                      - top: "-28px"
                      - left: 8px
                    icon:
                      - color: var(--primary-color)
                      - width: 60px
                  tap_action:
                    action: none
                - type: custom:mushroom-chips-card
                  alignment: end
                  chips:
                    - type: template
                      entity: light.lumieres
                      icon: mdi:lightbulb
                      icon_color: |
                        {% if is_state(entity, 'on') %}
                          orange
                        {% else %}
                          grey
                        {% endif %}
                    - type: template
                      entity: cover.volets_rdc
                      icon: |
                        {% if is_state(entity, 'open') %}
                          mdi:window-shutter-open
                        {% elif is_state(entity, 'closed') %}
                          mdi:window-shutter
                        {% else %}
                          mdi:window-shutter-alert
                        {% endif %}
                      icon_color: >
                        {% if is_state(entity, 'open') or is_state(entity,
                        'closed') %}
                          grey
                        {% else %}
                          orange
                        {% endif %}
                  card_mod:
                    style: |
                      ha-card {
                        width : 20px;
                        height: 100px;
                        margin-left: 88%;
                        margin-top: -27%;

                        background: none;
                        --chip-border-width: 0;
                        --chip-icon-size: 15px;
                        --chip-height: 15px;
                      }
            - type: custom:mushroom-template-card
              primary: Cuisine
              secondary: "-- °C"
              icon: mdi:silverware-fork-knife
              card_mod:
                style: |
                  ha-card {
                    height: 110px;
                    border-radius: 16px;
                  }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: Hall
              secondary: "-- °C"
              icon: mdi:door
              tap_action:
                action: navigate
                navigation_path: /dashboard-test/hall
              card_mod:
                style: |
                  ha-card { height: 110px; }
            - type: custom:mushroom-template-card
              primary: WC
              secondary: "-- °C"
              icon: mdi:toilet
              card_mod:
                style: |
                  ha-card { height: 110px; }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: Bureau
              secondary: "-- °C"
              icon: mdi:desk
              card_mod:
                style: |
                  ha-card { height: 110px; }
            - type: custom:mushroom-template-card
              primary: Réserve
              secondary: ""
              icon: mdi:plus
              card_mod:
                style: |
                  ha-card {
                    height: 110px;
                    opacity: 0.3;
                  }
  - attributes:
      label: Étage
      icon: mdi:home-floor-1
    card:
      type: vertical-stack
      cards:
        - type: entities
          title: Chambre 1
          entities:
            - light.chambre1
        - type: entities
          title: Chambre 2
          entities:
            - light.chambre2
grid_options:
  columns: 15
  rows: auto
9

C’est un peu hors sujet, mais comme ce n’est pas forcément très explicite dans decluttering card je te répond direct:

tout dépend de comment est géré ton dashboard:

  • en mode yaml, tu peux utiliser un fichier templatexxxx.yaml pour ton ou tes template et l’utiliser partout pour créer une template-card.
  • en mode « basique » UI (mon cas), tu es obligé de mettre le code de tes templates en tête de ton dashboard. Et donc si tu veux utiliser un template-card dans plusieurs dashboard, il faut coller le template en tête de chaque dashboard dans lequel tu veux utiliser la carte.
10

Perso, j’ai supprimé layout-card, il y a un bug, ca spam le journal d’erreur, quand tu édites une carte. Le problème dure depuis quelques mois et n’est pas corrigé.
Avec la vue section et l’option grid_options, je m’en suis sorti.

pour ce genre de carte, j’utilise button-card et fini layout-card :grin:

  - type: custom:button-card
    color_type: blank-card
    styles:
      card:
        - height: 5px

Pour card_mod, je suis passé sur uix, qui est bien plus à jour et évolué.

11

Hello,

Bon courage, c’est à quel moment que tu te dis que ça va être galère à maintenir ? :wink:
Dans l’absolu doit certainement y avoir moyen d’utiliser moins de cartes et de faire moins complexe non?

gaffe avec les template streamline ( potentiellement decluttering ) à bien penser au F5 pour avoir le bon rendu de carte si tu modifies le template

cdt

1 « J'aime »
12

C’est clair !

Quand une carte contient 6 types de custom cards différentes… il faut commencer à se poser des questions…

Perso je fais la même chose avec juste des custom:mushroom-template-cards dans une section… un seul type de carte (et des custom features) => deux risques de regression à chaque mise à jour… Et si je veux faire comme ta tabbed card, deux boutons en tête de la section avec un input select et on joue sur la visibilité soit de toute la section pour faciliter la mise en page, soit des cartes individuelles…

Mais là, en plus avec un empilement de stack in / tabbed / horizontal / layout cards… il te manque plus qu’une grid et une conditional pour avoir la collection complete…

13

Re,

Sinon il y a button card :smiley: Aller plus loin avec la carte custom:button-card :slight_smile:

cdt

1 « J'aime »
14

Carrément, vu qu’à priori c’est du YAML… J’ai pas le reflexe, moi je fais tout en UI…

1 « J'aime »
15

sinon, il peut faire exactement ce qu’il veut faire avec juste une carte custom:button-card et un template pour tous les custom_fields sans avoir besoin de rien d’autre…

EDIT : oupsss j’avais pas vu ton dernier message @freetronic, désolé

16

Re,

Pas très grave :smiley: vaut mieux donner l’info 2 fois au pire :wink:

cdt

1 « J'aime »
17

merci pour ton retour
je l’ai collé dans le dashboard et ça fonctionne nickel