Contenu d'un widget rogné

Bonjour,

J’ai un widget tout simple pour afficher une température. Je l’ai mis en page pour s’afficher sur 2 lignes, comme ça :
image
Mais on voit que le bas des numéros de la température est rogné.

Mon widget contient ceci :

<div align="center">Température extérieure :<br><br>#value#°c</div>

Si j’enlève les balise <br> et que j’affiche tout sur une ligne, ce n’est pas rogné.

Merci pour votre aide.

Bonjour

Dans la configuration de la tuile sur le dashboard,
tu vas dans disposition
Tu met en tableau 2 lignes
Tu mets sur la 2eme ligne la cde température
Pour un meilleur rendu tu peux mettre dans la ligne css de cette température : Pour décaler depuis le bord haut: padding:2px;
Et normalement tu n’auras plus besoin de ta ligne
Désolé je suis avec mobile et peux pas te mettre une capture d’écran. Mais voici un dèbut.

Ca fonctionne. Je n’aurai jamais pensé à cette solution. Mais ça fait le taf.
Merci !

Ici j’ai compilé quelque mise en forme en vrac et que je tente quand j’en ai besoin, ce n’est peut être pas parfait mais je test et j’adapte et quand cela fonctionne je le
garde en mémoire dans un fichier txt.

Pour décaler depuis le bord haut: padding:2px; ou padding-top:50px;

Pour décaler horizontalement: position:absolute;right:1px ou position:absolute;left:1px ou position;right:1px OU position;left:1px

.text-left {
text-align: right !important;
}
Pour l’écartement entre text verticale: line-height:25px

Pour ajout espace entre ligne text horizontal: white-space: pre-line; et ou pour préciser l’écartement; line-height: 2;

white-space: pre-line; : Permet de respecter les sauts de ligne à ajouter dans le texte.
line-height: 2; :
Augmente l’écartement entre les lignes (ajuster la valeur 2 selon les besoins, par exemple 1.5 pour un
écartement moindre).

Pour la tailles txt: font-size: 20px
font-size: 20px !important;

Pour la taille widget: width: 50px

Pour aligner verticalement: ;height: 50px

pour aligner horizontalement: text-align: left; ou text-align: right; ou text-align: center;
min-width:30px!important

Pour la couleur: background-color: transparent

Pour la couleur txt: font-weight: bold;color:grey

pour? : font-family: Verdana

display : none

margin-top:20px

padding:2px;font-size: 8px;width: 50px;vertical-align: middle;height: 20px;

ici un exemple que j’ai fait

Entre alexa et version jeedom la ligne complete:
vertical-align: middle;white-space: pre-line;

pour un rendu
Capture2

Et ici tu trouveras aussi quelque exemple que j’ai pu faire pour les dispositions, déroule
le sujet tu trouveras.

Bonne découverte

1 « J'aime »

Merci pour toutes ces astuces. Ca servira souvent je pense.
Par contre, j’ai testé sur un simple virtuel qui apparait comme ça :
image
On voit que le bas du y est rogné.

Rien de ce que tu m’a donné n’a fonctionné pour agrandir légèrement la zone en bas.

Fait moi voir la disposition dans la configuration de ta tuile et utilise joindre un fichier que de faire un copier coller car il difficile de bien voir une image en la zoomant

Voilà. C’est du basique de chez basique. J’ai rien touché de spécial dans les paramétrages. J’ai juste changé la couleur du texte mais ça n’a rien à voir.

tuile

Disposition

Bonjour, j’ai vois que tu es sur une version jeedom qui m’avait posé quelques petits soucis incompréhensible donc je suis passé à la mise à jour automatique et là je suis sur la 4.4.20 à voir si cause à effet peux pas te dire. :neutral_face:
Donc toujours pareil, passe en mode tableau et applique une commande css pour la mise en forme ou voir dans Réglage/configuration/système/interface.

et ici un blog qui m’a bien aidé. :mag:

Bonne disposition

Je suis sur une install toute fraiche faite ce week-end. Je suis en 4.4.20 aussi.
En soi ce problème n’est pas dramatique, mais ça titille le perfectionniste en moi :sweat_smile:
Merci pour ton aide je vais regarder ce blog.

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.