Espacement du titre du vertical-stack

Entraide Home Assistant
1

Bonjour

J’essaie de minimiser l’espace au dessus des titres de mes cartes vertical-stack qui imbriquent des Grid et custom button card.
Avez vous des idées ?
avec Layout-card ce la fonctionne pas, je n’y arrive pas non plus avec du CSS

Une image est plus parlante :

Capture d’écran HA
Capture d’écran HA1098×452 88.6 KB

Ma configuration

[center] |Version|core-2022.9.6|
| — | — |
|Type d’installation|Home Assistant OS|
|Développement|false|
|Supervisor|true|
|Docker|true|
|Utilisateur|root|
|Environnement virtuel|false|
|Version de Python|3.10.5|
|Famille du système d’exploitation|Linux|
|Version du système d’exploitation|5.15.67|
|Architecture du processeur|x86_64|
|Fuseau horaire|Europe/Paris|
|Répertoire de configuration|/config|

Home Assistant Community Store

GÉRER

GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.27.2
Stage running
Available Repositories 1191
Downloaded Repositories 22

Home Assistant Cloud

GÉRER

Connecté false
Accéder au serveur de certificats ok
Accéder au serveur d’authentification ok
Accéder à Home Assistant Cloud ok

Home Assistant Supervisor

Système d’exploitation hôte Home Assistant OS 9.0
Mise à jour stable
Version du Supervisor supervisor-2022.09.1
Version de l’agent 1.3.0
Version de Docker 20.10.17
Taille total du disque 30.8 GB
Taille du disque utilisé 8.9 GB
Sain true
Prise en charge true
Tableau de bord ova
API du Supervisor ok
Version API ok
Modules complémentaires installés Samba share (10.0.0), Terminal & SSH (9.6.1), File editor (5.4.1), ZeroTier One (0.15.1), Mosquitto broker (6.1.3)

Dashboards

GÉRER

Tableaux de bord 1
Ressources 19
Vues 7
Mode storage
2

Tu peu tester en CSS avec ça, à appliquer sur la carte vertical-stack:

Styles: |
  ha-card {
    top: -15px !important;
  }
3

Pas mieux ! J’ ai lu que les vertical et horizontal Stack n’étaient pas des cartes et que donc le CSS n’était pas applicable…

4

Mais t’es certain que c’est lié à la vertical stack?
J’ai ces espaces aussi, mais sur les titres de grilles stackées, c’est clairement un espace qui est lié au titre. Mais ça a l’air de faire pareil sur des grid toutes seules sans stack.

5

Ben non pas spécialement mais vu que le titre je le met sur le vertical-stack je me dis qu’effectivement c’est lié à ce Stack ! Quand j’analyse avec les outils de chrome ou Firefox cette fenêtre que je veux réduire est un padding du card-header (padding-top) mais que ce soit en CSS ou en jouant sur le height de latout-card ça ne remonte pas !j ai essayé de jouer sur ce padding-top sans succès. Je peux créer des marges entre mes Stacks mais la hauteur je n’y arrive pas !
Peut être je suis seulement nul, j’y connais pas grand chose en CSS. Toutes aides est la bienvenue !

6

Je viens de faire inspecter dans chrome.
J’ai bien un espace au dessus du titre comme chez toi.

image

Et quand je descends dans le composants de la page, j’arrive jusque un tag -H1-
image

Dans les le style du tag H1il y a du padding:

image

Si je le sélectionne ça me m’affiche la cadre vert:

image

Si je le passe à 0px pour le top padding:
image

L’espace disparait sur la page.
image

7

En fouillant ici.

Et avec ce code :

type: custom:mod-card
style:
  hui-vertical-stack-card$: |
    .card-header {
      background-color: green;
      padding: 0px 16px 16px !important;
    }
card:
  type: vertical-stack
  title: Test
  cards:
    - type: horizontal-stack
      cards:
        - type: entities
          entities:
            - entity: sun.sun
        - type: entities
          entities:
            - entity: sun.sun
        - type: entities
          entities:
            - entity: sun.sun

On obtient :

image

Le fond vert est là juste pour que ce soit un peu visuel :wink:

1 « J'aime »
8

idem pour moi dans l’inspection mais je n’arrive pas à le mettre en place dans le code de ma vertical-stack

9

Il semble que ça ne soit pas possible sans utiliser card-mod et en trichant avec le code fourni plus haut.

Les explications :

10

Oui c’est donc bien ce que je pensais, merci à vous pour vos retours :wink: