Positionnement widget selon leur taille

BugReport

Problèmes de marge dans le positionnement des widget sur le design

Page concernée :Design

Etape pour reproduire le Bug :
Nouveau design, insertion de deux widget, le rouge avec une taille de 0.5, le vert avec une taille de 1 (vide).

En « poussant » les deux widget dans les 4 angles du design, on obtient :

en haut et à droite

en haut et à gauche


en bas et à droite


en bas et à gauche

La marge haute est toujours OK (0)

Les autres marges sont variables et dépendent de la "taille du widget, plus le ratio diminue plus les marges augmentent.

J’ai l’impression que la taille du widget recalculé en pixel n’est pas prise en compte correctement dans le positionnement.

Ces problèmes existaient déjà dans les versions 3.x.

Bonjour,
Oui de mémoire ca a été mis hier sur le forum, j’y ai répondu. Pour résumé c’est un bug navigateur/jquery qui meme en mode zoom à 0.5 donne toujours la taille dans le zoom du module, ce qui fait que le jquery ui dragable à pas la bonne taille et donc on peut pas le déplacer ou on veux…

Je pense que je vais supprimer ce paramètre de zoom car il est vraiment trop mal supporté par les navigateur

Après renseignement je l’ai supprimé, c’est non standard et ne le sera probablement jamais zoom - CSS : Feuilles de style en cascade | MDN

Si c’est hors standard il vaut mieux effectivement le supprimer, on gérera via un scale dans les widget.

Par contre … le vent des pleureuses va encore se lever si tu le supprimes maintenant en V3 …

Petit up

Pour les widget de taille ‹ 1 ›, est ce que cela permettra de les positionner dans les angles droit, gauche, bas ??

Je crois la v3 je vais plus y toucher, ca ma un peu fatigué et dégouté cette histoire…

J’ai pas compris car en taille 1 normalement il ne devrait pas avoir de soucis

1 « J'aime »

En taille 1 on ne peut glisser le widget sur les bord droit, gauche ou bas, quand on regarde les « Position X ou Y », l’erreur est exactement de 2.5 % ( ‹ + › a gauche, ‹ - › a droite et en bas).

cf les trois derniers screen plus haut.

Je viens de vérifier, on a la même chose en V3x

C’est pas du au marge sur l’équipement ? En faite le soucis sur le dragable c’est que j’ai aucune option sur des limites de position ou autre (Draggable Widget | jQuery UI API Documentation). Lui il va au maximum possible, par contre il prend en compte le padding/marging donc vu que les équipements ont des marges tu peux pas aller au dela.

Dans ce cas on devrait avoir un décalage en px, hors là c’est en %, toujours 2.5% quelque soit la taille du widget.

Je viens de voir en faisant apparaître une grille de 5px dans le design que les limites de déplacement sont celle de la grille (logique). Donc ce doit être son dimensionnement qui pose ce problème, tu as peut être mis des marges au fond d’écran ??

Salut,
Je viens de regarder et je ne reproduis pas…
image


La le widget est bien tout en haut a gauche (j’ai testé tous les angles), je sauvegarde réactualise tout aucun soucis il bouge pas et pas de marge ou autre…

Bon ben je crois que je vais laisser tomber les designs. Trop d’heure de travail balayer d’un revers. En continuant ainsi, tu pourras bientôt supprimer les designs également. Plus personnes, n’osera investir du temps dedans. D’autant que nous avons déjà dû adapter nos designs au passage à Jeedom3

Pas de soucis je comprends tout a fait et tu as bien raison de le faire dès la version alpha qui n’a pas encore tout le système de transition vers la nouvelle version. Merci pour pour ton retour

Suite à l’annonce de la beta v4, j’ai donc procédé à la mise à jour proposée sur cette branche pour passer en 4.0.2.
La mise à jour ne se passe pas sans accro, mais c’est hors sujet de ce post.

Par contre la suppression de la fonction zoom est rédhibitoire. Dans la quasi-totalité des designs faits (pour moi ou d’autres) il est nécessaire d’adapter la taille des widgets. Un widget pour une présentation sur une tablette nécessite dans la majorité des cas de zoomer (x1.3 à 1.7) en fonction des différentes définitions.

Je n’ai jamais eu de bug sur cette fonction et je n’ai pas bien compris la problématique de @m.georgein. Si le problème était le positionnement du widget, il reste la possibilité d’affiner avec le positionnement dans les options avancé du widget sur le design.

Cette régression risque d’être mal perçue par beaucoup de personnes ayant investi du temps dans leurs designs.
Ne serait-il pas possible de réactiver cette fonctionnalité ou de proposer une alternative ?

Merci par avance.
Je reviens en arrière sur la mise à jour et je surveille ce sujet.

Stéphane

@Loic
après une recherche, la fonction n’est pas bien supportée par firefox, mais les autres navigateurs sembles bien prendre en compte la fonction zoom:

Par contre est-ce que l’alternative « transforme: scale » ne serait pas une alternative ?
ex pour un zoom de 150%
transform: scale(1.5, 1.5);

edit: plus simple : transform: scale(1.5)

Stéphane

Je viens de tester en mode console et cela fonctionne bien :


en ajoutant le transforme :


@loic serait-il possible de tester cette alternative qui est officiellement supportée ?

Je viens de tester le positionnement du widget dans les 4 angles :

Aucun problème constaté

Je viens de refaire des tests, design neuf, taille 1920x1080, ajout d’une image de fond de 1920x1080.
en affichant la grille 10x10 on voit que celle ci est plus petite que l’écran, hors c’est elle qui détermine les extrêmes de positionnement des widget.

en modifiant la taille du design à 2070x1050 tout rentre dans l’ordre pour le positionnement des widget.

Capture

Le problème se voit parfaitement bien dans la console de chrome :

Capture2

les height et width ne correspondent pas à la taille constatée de l’image.

Je me suis mal fait comprendre je pense, jeedom n’utilise plus zoom depuis un moment mais scale sauf que scale a un gros bug c’est que couplé au système de positionnement de jquery ui il y a un soucis sur le calcul de la taille des widgets qui renvoi leur taille sans le scale et donc forcément le système de déplacement des widgets merde grave. De ce que j’ai compris jquery ui renvoi la faute sur les navigateurs. Perso j’ai pas les compétences pour corriger les soucis interne au lib et j’ai pour règle en 4 soit je corrige le bug soit je supprime la fonction mais je ne laisserai pas trainer de bug connu.

Donc la fonction scale est supportée. Mais cohabitation difficilement avec jquery.

Après ce soit disant bug qui existe depuis longtemps et est contourné par beaucoup de monde. Ou plutôt ils s’y sont adapté.

La suppression pur et simple rend les designs inopérant. Ne serait il pas préférable d’identifier ce bug dans la release note et qu’aucun support ne sera fait que de détruire ce qui fait la customisation de Jeedom aujourd’hui.

Stéphane

Si le problème du css avec transform pose problème avec le jquery, pourquoi je pas utiliser une fonction tierce : https://github.com/louisremi/jquery.transform.js

C’est une piste