Bandeau des tuiles v4.4

[goulouche]

Bonjour à tous,

Avant la version 4.4, lorsqu’on réduisait la largeur d’une tuile, le bandeau titre de la tuile s’affichait automatiquement sur 2 lignes. Depuis la version 4.4.3, on peut à nouveau régler la largeur des tuiles à volonté mais le bandeau titre reste toujours sur une seule ligne. En conséquence, si le nom d’un équipement est un peu long, ledit nom ne s’affiche que partiellement.
On pouvait également customiser la hauteur du bandeau titre des tuiles en utilisant le fichier custom.css avec quelques lignes de code, par exemple :

/*Hauteur bandeau PLUGIN AGENDA*/
[data-eqtype="calendar"] .widget-name {
	height: 50px;
    display : flex;
	align-items : center;
    justify-content : center;
}

Cela semble ne plus fonctionner en version 4.4.

Est-il possible d’envisager un retour de cette fonction ?

[Bison]

Bonjour,

Je ne sais pas dans le plugin ce que ça donne mais tu peux tester en ajoutant white-space: normal;

Je ne pense pas que le reste soit vraiment nécessaire, à valider avec des essais donc :

[data-eqtype="calendar"] .widget-name {
    display: flex;
    white-space: normal;
}

[goulouche]

Bonsoir,
Merci de ta réponse. J’ai essayé ton code mais à priori ça ne fait que mettre le titre à gauche plutôt qu’au centre.

[Bison]

Ah étrange. Et avec l’option important ?

[data-eqtype="calendar"] .widget-name {
    display: flex;
    white-space: normal !important;
}

Si ça marche pas il doit y avoir une subtilité sur ce plugin et j’ai pas pour essayer

[goulouche]

Bonjour,

Désolé pour mon retard et merci pour ta réponse que je n’avais vue. J’ai essayé ton code avec un autre plugin mais ça ne marche pas non plus :

/*Hauteur bandeau PLUGIN ZWAVEJS*/
[data-eqtype="zwavejs"] .widget-name {
    display: flex;
    white-space: normal !important;
}

En fait, je cherche reproduire ceci :

En version 4.3, le nom de l’équipement se mettait automatiquement sur 2 lignes quand on réduisait la largeur de la tuile. Pour cette raison, je m’étais arrangé pour que la hauteur de tous les bandeaux soit équivalentes à 2 lignes. Visuellement c’était plus beau (à mon goût).

A présent, en version 4.4, si on réduit trop la largeur de la tuile, le nom sera tronqué parce qu’il n’y a plus de renvoi à la ligne automatique. De plus, je ne parviens pas à augmenter la hauteur des bandeaux pour les noms qui pourraient rester sur une ligne.

[Deder]

Bonjour,
J’avais également cette configuration en 4.3. En 4.4 j’ai mis ça dans le custom.css pour retrouver le même affichage sur 2 lignes.

div.eqLogic.eqLogic-widget .widget-name, div.scenario-widget .widget-name {
	white-space: unset;}

[goulouche]

Bonjour,

Je te remercie mais je viens d’essayer et il n’y a aucun changement sur mon dashboard. J’ai l’impression qu’il manque une accolade fermante à la fin de ton code

div.eqLogic.eqLogic-widget .widget-name, div.scenario-widget .widget-name { white-space: unset;}

mais avec ou pas c’est pareil.

[Deder]

En effet il manquait une accolade à la fin, le faite que cela ne fonctionne pas vient peut-être d’une autre modification dans le custom.css

[FabriceC01]

Bonjour à tous,
J’ai le même problème après passage en 4.4.3 dans les vues ou j’affiche le nom de l’objet dans le bandeau. Exemple :

alors qu’avant en 4.3 j’avais :

L’impossibilité d’avoir le bandeau sur 2 lignes est très pénible.
J’ai essayé la solution de @Deder avec l’accolade fermante mais sans succès. Je ne suis toutefois pas sûr de l’avoir mis au bon endroit (je ne comprend rien à ce code). Je l’ai mis dans le custom.css de Réglages/interfaces/Personnalisation avancée/desktop/custom.css qui était vide :

Si quelqu’un a des idées…
Merci d’avance.
pénible cette mise à jour.

[Phpvarious]

Bonsoir,

pour avoir le même comportement que en 4.3, a mettre dans le custom.css :

div.eqLogic.eqLogic-widget .widget-name, div.scenario-widget .widget-name {
  max-height: 45px;
  min-height: 24px;
  text-overflow: unset;
  white-space: unset;
  height: unset;
}

@FabriceC01

Je ne suis toutefois pas sûr de l’avoir mis au bon endroit (je ne comprend rien à ce code). Je l’ai mis dans le custom.css de Réglages/interfaces/Personnalisation avancée/desktop/custom.css qui était vide :

c’est bien le bon endroit, il faut toutefois une fois sauvegardé, activer le custom.css :

[FabriceC01]

Bonjour @Phpvarious ,
Merci pour cette réponse rapide et efficace. ça marche.
Est-ce que c’est un réglage qui risque de sauter à la prochaine mise à jour ?
Merci.

[Phpvarious]

Non, ce qui est dans le custom.css n’est pas touché au mise a jour. Mais pas a l’abris qu’une modification du core vienne perturbé ce custom.css.

[Bibibe]

Encore une aide pertinente de Phpvarious ! Merci ! Merci !
« Que serions-nous sans toi, qui vint sur ce forum… »

[goulouche]

Bonjour à tous,

Merci pour ta réponse @Phpvarious. Ça fonctionne mais ça ne correspond pas tout à fait à mon attente. En effet, je souhaitais que tous les bandeaux soient sur +/- 45 pixels quelle que soit la longueur du titre (c’est ce que je montre plus haut).

J’ai fait un ticket sur ce sujet le 18 avril :

Bonjour,
Avant la version 4.4, quand on réduisait la largeur d’une tuile, le nom de l’équipement s’affichait automatiquement sur 2 lignes et la hauteur du bandeau augmentait aussi automatiquement. Cette fonction ayant disparu avec la version 4.4, serait-il possible de la remettre ?
Merci de votre attention.

Et j’ai obtenu cette réponse :

Bonjour,
J’ai soumis votre demande elle sera analysé et en fonction développée ou non. Vous pouvez suivre l’avancement en temps réel ici : Allow eqLogic title on two line if it's can't be on line · Issue #2554 · jeedom/core · GitHub

Loic

Évidemment, j’ai suivi l’avancement et un commentaire est tombé aujourd’hui. Toutefois, si quelqu’un peut me décoder ce langage, je suis preneur.

[Phpvarious]

Hello,

test ceci :

div.eqLogic.eqLogic-widget .widget-name, div.scenario-widget .widget-name {
  height: 45px;
  text-overflow: unset;
  white-space: unset;
}

[goulouche]

YeeeeeeeeeS ! Merci c’est exactement ce que je voulais. Un dernier détail : j’aimerais aussi centrer le texte verticalement dans le bandeau. Ça se fait automatiquement quand il y a 2 lignes pas avec une seule.

[Phpvarious]

et ceci :

div.eqLogic.eqLogic-widget .widget-name, div.scenario-widget .widget-name {
    height: 50px;
    white-space: unset;
    align-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.verticalAlign {
    height: calc(100% - 50px);
}

Si tu modifie les valeurs, prend soin de mettre les mêmes ici :

[goulouche]

Ç’est exactement ce que je souhaitais. Merci beaucoup parce que jamais je n’aurais trouvé un truc pareil.

You know what ? I am happy.