# Sections - alignement

**URL:** <https://forum.hacf.fr/t/sections-alignement/51334>\
**Category:** Entraide Home Assistant\
**Tags:** aide\
**Created:** [Novembre 13, 2024, 11:15 UTC](https://forum.hacf.fr/t/sections-alignement/51334 "2024-11-13T11:15:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Crapulfeust](https://forum.hacf.fr/user_avatar/forum.hacf.fr/crapulfeust/32/105834_2.png) [@Crapulfeust](https://forum.hacf.fr/u/Crapulfeust)\
**Post date:** [Novembre 13, 2024, 11:15 UTC](https://forum.hacf.fr/t/sections-alignement/51334/1 "2024-11-13T11:15:17Z")

</div>

Bonjour,

Quelques chose m'échappe avec les sections, aussi je viens demander un coup de main.

Je désire passer au mode de vue de sections et je n'arrive pas à afficher cela correctement sur ma tablette domotique.  
j'ai créé ma vue section, 3 colonnes.  
Sur ordinateur, aucun problème (même si l'optimisation des largeurs n'est pas bonne 🤔...??)  
Et sur ma tablette, cela reste constamment sur 2 colonnes, alors qu'il y aurait de la place vraisemblablement.

Une notion de largeur à indiquer quelques part peut être ?  
Voici la config de ma vue, la vue ordi, la vue tablette.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/a/e/aeb19d457c8b746a14684e73ef4b04aeae193241.png)

Une piste, une idée ?  
Merci d'avance  
O.

## Ma configuration

* * *

[center]## System Information

| version | core-2024.11.1 |
| --- | --- |
| 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 |
> | HACS Data | ok |
> | GitHub API Calls Remaining | 5000 |
> | Installed Version | 2.0.1 |
> | Stage | running |
> | Available Repositories | 1463 |
> | Downloaded Repositories | 71 |

> **Home Assistant Cloud**
>
> | logged\_in | true |
> | --- | --- |
> | subscription\_expiration | 5 juillet 2025 à 02:00 |
> | relayer\_connected | true |
> | relayer\_region | eu-central-1 |
> | remote\_enabled | true |
> | remote\_connected | true |
> | alexa\_enabled | true |
> | google\_enabled | true |
> | cloud\_ice\_servers\_enabled | true |
> | remote\_server | eu-central-1-19.ui.nabu.casa |
> | certificate\_status | ready |
> | instance\_id | 6454030f03784242acad96316059a20c |
> | 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.2 |
> | agent\_version | 1.6.0 |
> | docker\_version | 27.2.0 |
> | disk\_total | 30.8 GB |
> | disk\_used | 22.8 GB |
> | healthy | true |
> | supported | true |
> | host\_connectivity | true |
> | supervisor\_connectivity | true |
> | ntp\_synchronized | true |
> | virtualization | kvm |
> | board | ova |
> | supervisor\_api | ok |
> | version\_api | ok |
> | installed\_addons | AirSonos (4.2.2), Z-Wave JS (0.9.0), File editor (5.8.0), Samba share (12.3.2), Duck DNS (1.18.0), Samba Backup (5.2.0), Mosquitto broker (6.4.1), Terminal & SSH (9.15.0), Studio Code Server (5.17.3), Music Assistant Server (2.3.2), Music Assistant Server (beta) (2.4.0b4), HA Scheduler (0.17), Matter Server (6.6.0) |

> **Dashboards**
>
> | dashboards | 10 |
> | --- | --- |
> | resources | 43 |
> | views | 42 |
> | mode | storage |

> **Recorder**
>
> | oldest\_recorder\_run | 4 novembre 2024 à 18:16 |
> | --- | --- |
> | current\_recorder\_run | 13 novembre 2024 à 08:26 |
> | estimated\_db\_size | 866.55 MiB |
> | database\_engine | sqlite |
> | database\_version | 3.45.3 |

[/center]
* * *

---

<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:** [Novembre 13, 2024, 11:19 UTC](https://forum.hacf.fr/t/sections-alignement/51334/2 "2024-11-13T11:19:09Z")

</div>

Bonjour,

> [@Crapulfeust](#):
>
> Une notion de largeur à indiquer quelques part peut être ?

Je ne crois pas.  
j'ai essayé sur ma tablette a la verticale, sur une colonne, ça ne prend même pas la largeur complète ☹  
du coup je reste sur une vue verticale avec layout-card. Layout-card ne fonctionne pas sur une vue section, ça aurais permis une largeur au choix.

 ![Screenshot_20241113_122430_de.ozerov.fully](https://forum.hacf.fr/uploads/default/original/3X/c/f/cfe3357f107694ba71432bece1c6ebe5a7b1137f.jpeg)  
c'est pas encore pour demain, que je vais passer a la vue section.

---

<div class="post-metadata">

**Author:** ![EMqA](https://forum.hacf.fr/user_avatar/forum.hacf.fr/emqa/32/49194_2.png) [@EMqA](https://forum.hacf.fr/u/EMqA)\
**Post date:** [Novembre 13, 2024, 11:36 UTC](https://forum.hacf.fr/t/sections-alignement/51334/3 "2024-11-13T11:36:47Z")

</div>

Même combat sur mon iPad.  
J’ai piqué une astuce à BBE il me semble, à mettre dans le thème utilisé.

```auto
ha-view-sections-column-gap: 8px
ha-view-sections-column-min-width: 300px

```

---

<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:** [Novembre 13, 2024, 11:37 UTC](https://forum.hacf.fr/t/sections-alignement/51334/4 "2024-11-13T11:37:31Z")

</div>

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-section-grid-row-gap` (default: `8px`)

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 11:39 UTC](https://forum.hacf.fr/t/sections-alignement/51334/5 "2024-11-13T11:39:27Z")

</div>

Salut  
Tu définis 3 sections donc chaque section fera 1/3 de la largeur donc non clairement il n’y a pas la place pour les 3 cote à cote sur tablette.  
Ce n’est pas parce que ta 2nde section n’a qu’une petite icone qu’elle n’occupe pas un tiers de l’écran.

Pour l’instant effectivement comme la dit @WarC0zes je ne pense pas que tu puisses jouer sur les largeurs de chaque section.

Edit : A moins que la solution proposée par @EMqA via @BBE fonctionne

---

<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:** [Novembre 13, 2024, 11:46 UTC](https://forum.hacf.fr/t/sections-alignement/51334/6 "2024-11-13T11:46:48Z")

</div>

Tout ce qui a été dit au dessus est juste…

Il y a des arguments un peu partout pour régler la mise en page des sections:

- Dans le theme comme indiqué plus haut:

- Dans la vue tu peux régler le nombre max de colonnes

- Dans la section elle même tu peux créer des sections de largeur double, triple, etc… et même pleine largeur.

Mais pas possible de faire des sections de largeur variables «&nbsp;plus étroites&nbsp;».  
A part faire une première section «&nbsp;double&nbsp;» puis deux normales, mais si tes sections sont vides, ça fera des espaces vides… Comme sur PC d’ailleurs puisque tu as des trous «&nbsp;entre&nbsp;» tes sections

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 11:50 UTC](https://forum.hacf.fr/t/sections-alignement/51334/7 "2024-11-13T11:50:01Z")

</div>

Par contre du coup moi j’ai une question.

N’utilisant pas de thème actuellement, comment et ou je crée un fichier theme pour mettre ça dedans par exemple.

```auto
ha-view-sections-column-gap: 8px
ha-view-sections-column-min-width: 300px

```

Je me doute bien que dans la doc y’a l’info mais puisque tu es là 😂

---

<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:** [Novembre 13, 2024, 11:53 UTC](https://forum.hacf.fr/t/sections-alignement/51334/8 "2024-11-13T11:53:26Z")

</div>

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:

```auto
# Theme et couleurs tempo (bleu blanc rouge).
frontend:
  themes: !include themes.yaml

```

puis un fichier themes.yaml:

```auto
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: "#8B8B8B"
      energy-grid-consumption-color-2: "#AAAAAA"
      energy-grid-consumption-color-1: "#8B0000"
      energy-grid-consumption-color-0: "#FF0000"
    dark:
      energy-grid-consumption-color-5: "#00008B"
      energy-grid-consumption-color-4: "#0000FF"
      energy-grid-consumption-color-3: "#D3D3D3"
      energy-grid-consumption-color-2: "#FAFAFA"
      energy-grid-consumption-color-1: "#8B0000"
      energy-grid-consumption-color-0: "#FF0000"
  ha-view-sections-column-gap: 8px
  ha-view-sections-column-min-width: 400px
  
day_and_night-sections:
  primary-color: "#264269"
  modes:
    light:
      energy-grid-consumption-color-5: "#00008B"
      energy-grid-consumption-color-4: "#0000FF"
      energy-grid-consumption-color-3: "#8B8B8B"
      energy-grid-consumption-color-2: "#AAAAAA"
      energy-grid-consumption-color-1: "#8B0000"
      energy-grid-consumption-color-0: "#FF0000"
    dark:
      energy-grid-consumption-color-5: "#00008B"
      energy-grid-consumption-color-4: "#0000FF"
      energy-grid-consumption-color-3: "#D3D3D3"
      energy-grid-consumption-color-2: "#FAFAFA"
      energy-grid-consumption-color-1: "#8B0000"
      energy-grid-consumption-color-0: "#FF0000"
  ha-view-sections-column-min-width: 200px
  ha-view-sections-column-max-width: 350px
  ha-view-sections-column-gap: 32px

```

Tu peux définir autant de thèmes que tu veux et les selectionner par vue ou dans ton interface utilisateur…

---

<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:** [Novembre 13, 2024, 11:53 UTC](https://forum.hacf.fr/t/sections-alignement/51334/9 "2024-11-13T11:53:47Z")

</div>

Tu ajoutes ça dans configuration.yaml:

```auto
frontend:
  themes: !include_dir_merge_named themes

```

Tu crées un dossier `themes` dans /config.  
Puis un dossier avec un nom du thème

 ![image](https://forum.hacf.fr/uploads/default/original/3X/e/9/e906499467b1ca9f24968a0c6756fe27c2a68e0b.png)  
et tu crées un fichier au nom du thème en yaml.  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/b/bbf10794d7a646da1156f1ac0e96459026d2e36e.png)

exemple du mobile.yaml

```auto
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)
  mush-chip-spacing: 5px
  mush-chip-font-size: 12px
  mush-chip-padding: 0 0.4em
  #mushroom icon
  mush-icon-size: 45px
  mush-icon-symbol-size: 0.8em
  mush-badge-size: 16px
  mush-badge-border-radius: 50%
  #mushrrom card
  mush-card-primary-font-size: 13px
  mush-card-secondary-font-size: 12px
  mush-card-secondary-color: '#A0A0A0'
  #media player
  mini-media-player-button-color: rgba(139,148,158,0.25)
  mini-media-player-progress-height: 12px
  mini-media-player-artwork-opacity: 0.7
  # Colors
  mush-rgb-red: 255, 0, 0
  mush-rgb-blue: 33, 150, 255
  mush-rgb-green: 0, 128, 0
  mush-rgb-yellow: 255, 240, 0
  mush-rgb-orange: 255, 128, 0
  state-binary_sensor-door-off-color: green
  state-binary_sensor-door-on-color: red
  state-binary_sensor-motion-off-color: green
  state-binary_sensor-motion-on-color: red
  state-binary_sensor-window-off-color: green
  state-binary_sensor-window-on-color: red
  #card_mod
  card-mod-theme: mobile
  card-mod-card: |
    ha-card > div > div > table > tbody > tr:nth-child(1) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #FF0000 !important;
    }
    ha-card > div > div > table > tbody > tr:nth-child(2) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #00b300 !important;
    }
    ha-card.class_padding {
      padding: 0px 8px 8px 8px;
      margin-top: -8px;
    }
  card-mod-more-info-yaml: |
    .: |
      ha-dialog > div > div {
        padding: 0% !important;
        outline: none !important;
      }
  modes:
      light: {}
      dark: {}

```

---

<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:** [Novembre 13, 2024, 11:54 UTC](https://forum.hacf.fr/t/sections-alignement/51334/10 "2024-11-13T11:54:44Z")

</div>

> [@WarC0zes](#):
>
> Tu ajoutes ça dans configuration.yaml:
> 
> ```auto
> frontend:
> themes: !include_dir_merge_named themes
> 
> ```
> 
> Tu crées un dossier `themes` dans /config.  
> Puis un dossier avec un nom du thème

Voilà...

Encore plus propre que moi...

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 11:55 UTC](https://forum.hacf.fr/t/sections-alignement/51334/11 "2024-11-13T11:55:47Z")

</div>

Merci messieurs. Je testerai ça ce soir.

---

<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:** [Novembre 13, 2024, 11:56 UTC](https://forum.hacf.fr/t/sections-alignement/51334/12 "2024-11-13T11:56:38Z")

</div>

Oui, Comme ça, il peut download aussi des thèmes à partir de HACS.  
Il faut, c’est configuration, pour fonctionner avec HACS.

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 12:01 UTC](https://forum.hacf.fr/t/sections-alignement/51334/13 "2024-11-13T12:01:39Z")

</div>

Oui mais non. Le thème de base me convient très bien pas besoin d’un thème star-wars 🤣

Je veux juste pouvoir faire quelques ajustements du style au dessus ou encore l’histoire des padding et margin de card-mod comme tu l’avais dejà évoqué dans un des posts pour ne plus avoir à les mettre chaque fois.

Mais j’ai pigé le principe.  
👏 🙏

---

<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:** [Novembre 13, 2024, 12:06 UTC](https://forum.hacf.fr/t/sections-alignement/51334/14 "2024-11-13T12:06:04Z")

</div>

> [@Tochy](#):
>
> Oui mais non. Le thème de base me convient très bien pas besoin d’un thème star-wars 🤣

Mince, j'aurais pensé qu'un thème Star trek, t'aurais plus 🤪

 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/2/02500cb638c114cc22c062ab6ddaa85dc671ddf1.jpeg)

---

<div class="post-metadata">

**Author:** ![Crapulfeust](https://forum.hacf.fr/user_avatar/forum.hacf.fr/crapulfeust/32/105834_2.png) [@Crapulfeust](https://forum.hacf.fr/u/Crapulfeust)\
**Post date:** [Novembre 13, 2024, 1:55 UTC](https://forum.hacf.fr/t/sections-alignement/51334/15 "2024-11-13T13:55:16Z")

</div>

merci @WarC0zes @BBE @Tochy @EMqA  
c’est un peu plus «&nbsp;complexe&nbsp;» que je ne me l’imaginais, mais en tous les cas j’aurai encore appris grâce à vous (créer un thème, où, les bases pour le «&nbsp;configurer&nbsp;»…).  
Il ne me reste plus qu’à mettre en pratique, pas sur que cela soit dès demain mais je vais m’y atteler.  
🙏 👍  
O.

---

<div class="post-metadata">

**Author:** ![EMqA](https://forum.hacf.fr/user_avatar/forum.hacf.fr/emqa/32/49194_2.png) [@EMqA](https://forum.hacf.fr/u/EMqA)\
**Post date:** [Novembre 13, 2024, 5:38 UTC](https://forum.hacf.fr/t/sections-alignement/51334/16 "2024-11-13T17:38:42Z")

</div>

Tu as les thèmes mushroom sur hacs, qui sont il me semble identiques au thème par défaut, mais au moins tu auras un fichier de base pour bosser.

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 6:55 UTC](https://forum.hacf.fr/t/sections-alignement/51334/17 "2024-11-13T18:55:16Z")

</div>

> [@BBE](#):
>
> Tu peux définir autant de thèmes que tu veux et les sélectionner par vue ou dans ton interface utilisateur…

Alors j’ai testé vite fait avec le code ci-dessous :

```auto
my_theme:
  primary-color: "#296926"

  ha-view-sections-column-min-width: 538px
  ha-view-sections-column-max-width: 538px
  ha-view-sections-column-gap: 32px

```

Pour les largeurs pas de soucis ça fonctionne comme convenue que je mette le thème par vue ou par l’utilisateur.  
J’ai mis une primary-color pour tester voir le changement elle n’agit que si je met le thème par l’utilisateur et non par vue.  
Même si ça ne me pose pas de problème car je ne compte pas l’utilisée, avez vous une idée de pourquoi cette différence ?  
J’ai bien rafraichit le cache et même tenter un redémarrage.

En tous les cas merci pour les infos.

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 7:00 UTC](https://forum.hacf.fr/t/sections-alignement/51334/18 "2024-11-13T19:00:02Z")

</div>

C’est pas si compliqué tu verras, ça m’a pris 3 minutes pour tester.

---

<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:** [Novembre 13, 2024, 7:14 UTC](https://forum.hacf.fr/t/sections-alignement/51334/19 "2024-11-13T19:14:47Z")

</div>

> [@Tochy](#):
>
> Même si ça ne me pose pas de problème car je ne compte pas l’utilisée, avez vous une idée de pourquoi cette différence ?

Peut être que ça affetcte le haut du dashboard par utilisateur, et dans la vue uniquement si tu utilise cette couleur dans les cartes genre comme ça:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/c/c/cc32cf19a899a33e9043e63fef3919b44ec880ff.png)

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Novembre 13, 2024, 7:22 UTC](https://forum.hacf.fr/t/sections-alignement/51334/20 "2024-11-13T19:22:05Z")

</div>

Effectivement à l’air de correspondre à ça.

[Page suivante](https://forum.hacf.fr/t/sections-alignement/51334.md?page=2)