# Mise en page des chips sur une ligne

**URL:** <https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091>\
**Category:** Entraide Home Assistant\
**Tags:** aide\
**Created:** [Janvier 16, 2025, 6:39 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091 "2025-01-16T18:39:17Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**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:** [Janvier 17, 2025, 5:43 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/21 "2025-01-17T17:43:51Z")

</div>

> [@BBE](#):
>
> ```auto
> card_mod:
> style: |
> ha-card {
> padding-top: 12px; # ligne de chip démarre à 12px du bord du haut
> padding-bottom: 12px; # ligne de chip à 12px du bord du bas
> margin-left: -80px; # la carte chips est décalée de 80px à gauche
> padding-right: 12px; # ligne de chips démarre à 12px du bord droit de la carte
> }
> 
> ```

il faut respecter les espaces

> [@fredo54](#):
>
> ```auto
> card_mod:
> style: |
> ha-card {
> padding-top: 12px;
> margin-top: 0px;
> padding-bottom: 12px;
> margin-left: -12px;
> padding-left: 0px;
> padding-right: 8px;
> }
> 
> ```

---

<div class="post-metadata">

**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:** [Janvier 17, 2025, 5:44 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/22 "2025-01-17T17:44:59Z")

</div>

Tu as encore des soucis d’indentation dans ton code… Tu as enlevé style : mais pas les espaces associés.

Et concernant tes chips, tu as créé un thème ?

Je vais dire un truc bête : tu ferais pas plus vite de repartir à zéro du code fourni dans le [tuto](https://forum.hacf.fr/t/carte-mise-en-forme-de-room-card-avec-mushroom-et-tutos/20429/12) et de le modifier? Certains y arrivent très bien : [[Carte] Mise en forme de room-card avec mushroom et tutos - #389 par crampes2](https://forum.hacf.fr/t/carte-mise-en-forme-de-room-card-avec-mushroom-et-tutos/20429/389)

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 17, 2025, 9:43 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/23 "2025-01-17T21:43:14Z")

</div>

ok je vais essayer. merci

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 18, 2025, 9:06 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/24 "2025-01-18T09:06:52Z")

</div>

j'ai essayer ton code sans modidication encore et les marges ne sont pas active :

![ha](https://forum.hacf.fr/uploads/default/original/3X/b/d/bd6a0b6b25a7210145f0a964c2d72975c4a61dae.png)

cela aurait un rapport avec le thème ?

---

<div class="post-metadata">

**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:** [Janvier 18, 2025, 9:32 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/25 "2025-01-18T09:32:34Z")

</div>

> [@fredo54](#):
>
> cela aurait un rapport avec le thème ?

Non aucun.(Édit peut être si tu modifies de valeurs de mushroom…)

Tu as bien installé card-mod dans HACS ?

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 18, 2025, 10:00 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/26 "2025-01-18T10:00:59Z")

</div>

> [@BBE](#):
>
> card-mod

oui bien sur sinon ça ferait un defaut.

---

<div class="post-metadata">

**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:** [Janvier 18, 2025, 10:09 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/27 "2025-01-18T10:09:11Z")

</div>

Pas 100% sur en tout cas visiblement ça ne marche pas…

Alors moi comme ça je ne vois pas d’où ça peut venir a part cardmod…

Poste ton code (mon code en l’occurrence normalement) une capture d’écran et le thème que tu utilises.

Vérifie bien que card-mod soit actif

Quelqu’un aura peut être une idée…

---

<div class="post-metadata">

**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:** [Janvier 18, 2025, 10:10 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/28 "2025-01-18T10:10:17Z")

</div>

@fredo, tu peux essayer de supprimer card-mod de HACS et de le réinstaller.

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 18, 2025, 11:42 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/29 "2025-01-18T11:42:47Z")

</div>

bonjour, c'est fait même problème

le code de la carte de @BBE :

```auto
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: "{{ states('sensor.echo_jeanne_temperature') }}°C"
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
                  battery_sensor: sensor.alocasia_zebrina_battery
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        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 %}
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
    alignment: end
    style: |
      ha-card {
        padding-top: -15px;
        padding-bottom: 15px;
        margin-left: -80px;
        padding-left: 150px;
        padding-right: 15px;
      }

```

 ![ha new](https://forum.hacf.fr/uploads/default/original/3X/2/2/22f8b7a3a17c62eb02145436b54dabf97509ec8e.png)

et le theme :

 ![ha](https://forum.hacf.fr/uploads/default/original/3X/2/2/227de9f509b3521904bcd9638c3cc71293efcf7f.png)

j'ai essayé le theme mushroom celui par defaut et celui la.

---

<div class="post-metadata">

**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:** [Janvier 18, 2025, 11:55 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/30 "2025-01-18T11:55:17Z")

</div>

Et le code Yaml de ton thème ?

Parce que le nom c’est un peu léger pour debugger…

---

<div class="post-metadata">

**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:** [Janvier 18, 2025, 11:56 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/31 "2025-01-18T11:56:05Z")

</div>

Et redémarrer HA et vider le cache?

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 18, 2025, 12:13 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/32 "2025-01-18T12:13:09Z")

</div>

voila le yaml et j’ai vider le cache et redemarré HA pareil:

```auto
yourname:
  dialog-backdrop-filter: blur(20px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
  ### Header Height ###
  header-height: 40px
  ### Main Interface Colors ###
  lovelace-background: 'center / cover no-repeat url("/local/backgrounds/yourname.jpg") fixed'
  app-header-background-color: "#141A32"
  card-background-color: "rgba(0, 0, 0, 0.5)"
  primary-color: "#007AFF"
  light-primary-color: "#4DA3FF"
  primary-background-color: var(--app-header-background-color)
  secondary-background-color: "#000000"
  rgb-secondary-background-color: 0, 0, 0
  divider-color: "#3B4C8B"
  markdown-code-background-color: "#1E2747"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: var(--light-primary-color)
  text-primary-color: var(--primary-text-color)
  disabled-text-color: "#4F5F78"
  ### Sidebar Menu ###
  sidebar-icon-color: "#4F6B95"
  sidebar-text-color: "#CBD5E4"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: var(--light-primary-color)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  sidebar-background-color: var(--primary-background-color)
  ### States and Badges ###
  state-icon-color: var(--primary-color)
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: var(--primary-color)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: var(--markdown-code-background-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: var(--divider-color)
  label-badge-yellow: "#DCA304"
  ### Cards ###
  ha-card-border-radius: '20px'
  ha-card-background: "rgba(0, 0, 0, 0.5)"
  paper-card-header-color: var(--primary-text-color)
  paper-card-background-color: var(--ha-card-background)
  paper-listbox-background-color: var(--primary-background-color)
  rgb-card-background-color: var(--rgb-secondary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCFCFC"
  paper-toggle-button-checked-bar-color: var(--light-primary-color)
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#303F79"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--primary-background-color)
  data-table-background-color: var(--primary-background-color)
  ### Switches ###
  switch-unchecked-button-color: var(--divider-color)
  switch-unchecked-track-color: var(--divider-color)
  ### Inputs ###
  input-fill-color: "rgba(0, 0, 0, 0.5)"
  input-label-ink-color: var(--primary-color)
  input-ink-color: var(--primary-color)
  input-disabled-fill-color: "rgba(0, 0, 0, 0.33)"
  input-disabled-ink-color: var(--disabled-primary-color)

```

---

<div class="post-metadata">

**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:** [Janvier 18, 2025, 12:41 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/33 "2025-01-18T12:41:42Z")

</div>

Perso je ne comprends pas.

Cardmod a l’air complètement HS, et il ne joue pas avec des variables utilisées dans ton thème.

Tu es sur que card-mod est installé ? Il marche avec d’autres cartes?

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 18, 2025, 1:07 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/34 "2025-01-18T13:07:35Z")

</div>

on est d'accord que c'est celui la ?  
 ![ha](https://forum.hacf.fr/uploads/default/optimized/3X/c/3/c3e91e2213f71264f796d544c76914cc3ced37e3_2_690x26.png)

---

<div class="post-metadata">

**Author:** ![fredo54](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/f/a6a055/32.png) [@fredo54](https://forum.hacf.fr/u/fredo54)\
**Post date:** [Janvier 18, 2025, 4:23 UTC](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091/35 "2025-01-18T16:23:46Z")

</div>

finalement, après avoir désinstallé deux fois la cartmod et vidé le cache du navigateur tout est rentré dans l’ordre. j’ai pu faire correctement mes marges.  
merci pour votre aide.

[Page précédente](https://forum.hacf.fr/t/mise-en-page-des-chips-sur-une-ligne/56091.md?page=1)