Impossible d'appuyer sur une action d'un widget si zone présente

Bonjour,

Quand je positionne un widget au survol ou clic et qu’une zone en dessous est présente, je ne peux pas appuyer sur une action ou un bouton.

Par exemple, j’ai plusieurs zones avec widget au clic dans le tableau de suivi par pièce.

(on voit les traits gris).

Si je clique donc sur une zone (exemple), le widget s’ouvre. Sauf que si j’essaie d’appuyer sur des boutons, cela ne marche pas.

Pour l’heure j’ai réglé comme suit :

  • design de base en niveau 0,
  • zone d’appui en niveau 1,
  • les widgets que j’affiche au clic n’ont pas de niveau paramétrable.

Si je positionne tout le monde à 0, cela semble marcher sauf que si j’affiche le widget, certains sont bien au dessus, d’autres pas.

Est-ce logique ? Comment faire pour éviter ce souci ?

EDIT : dernière release stable V4

Bon, je viens de vérifier si j’enregistre tout au niveau 0, j’arrive à avoir tout correctement sauf quelques widgets.
Problème, c’est que tout mettre à 0 n’est pas une bonne idée quand on veut avoir un widget, une zone par dessus pour être d’appuyer dessus.

Du coup, il y a forcément un hic quelque part. Y a t’il possibilité de « forcer » (même par CSS) l’affichage du widget au survol sur un niveau supérieur ? Comme l’option niveau n’est pas dispo sur le widget en configuration, je ne vois pas trop comment faire…

Exemples de souci :

Détail intéressant, si je resauve la configuration de la zone (ici celle d’au dessus) :

le coup d’après, tada.

Mais ça ne marche pas à tous les coups et je doute que ce soit la solution :smiley:

Si je mets un niveau 1 sur les zones, les widgets sont bien affichés mais on ne peut plus cliquer sur certaines parties car les zones sont dessus.

Problème sans fin lol !

de mémoire en style on joue avec z index

qui via id/class peut se modifier en script

ou jquery css

Euh je touche mes limites là. J’utilise déjà la personnalisation avancée sur l’id de l’équipement pour forcer sa position.

Tu as un exemple dans le cas présent ? Merci.

J’ai tenté de modifier le CSS qui touche chaque ID que j’affiche en widget en forçant le zindex mais cela fait rien. Je ne peux pas appuyer sur le bouton du widget s’il y a une zone.
J’ai positionné la zone en niveau 1 ; le design est en niveau 0.

/* gestion mouvements */
.zoneEqLogicOnClic > [data-eqlogic_id="1958"] > .widget-name { display: none; }
.zoneEqLogicOnClic > [data-eqlogic_id="1958"] { zindex:3;position:relative;top:0px;left:-400px; width:350px;height: 590px !important; border-radius: 5px !important;
  border: 2px solid ghostwhite !important; background-color: rgba(0,0,0,1) !important; }

EDIT : il semblerait que le zindex soit 999 pour le niveau 0 ; 1000 pour le niveau 1 ; 1001 pour le niveau 2.
J’ai aussi tenté avec !important, nada.

Je ne peux pas appuyer par exemple sur 6/8/X ; 1 et 2 par exemple car il y a des zones.

En bas c’est possible. Sauf qu’en plus ce n’est pas logique car j’ai aussi des zones (celle qui font afficher ce digicode). J’ai ce problème sur tous les éléments widget que j’affiche où j’ai une zone. Je ne peux pas appuyer dessus…

Je vais finir par devoir mettre le popup dans le design…

Bon, avec le petit bouton en bas à droite du widget, j’ai localisé les widgets en cause et les zones que j’ai réduit. Un premier problème de contourné.

Par contre, cela ne m’explique pas si je positionne un widget au dessus d’une zone, je ne peux plus appuyer dessus.

j’ai rapidement regardé
ça marche si tu passes par les class

var p2d = 1;                   
var plan_2d = $('[data-plan_id="'+p2d+'"]');
plan_2d.show().attr('class', 'div_displayObject').addClass('zindex3000')

tu enlèves ta tuile de la class div_displayObjet
et dans style tu créé une class
.zindex3000

tu devras y mettre z index et d’autres truc vu qu’on enleves tous le css (position,couleur,…)

et idem dans l’autres sens

mais j’ai pas été plus loin (zone,test de clic,…)

pour ton info j’ai essayé autrement avec la profondeur qu’on modifie elle se retrouve dans le html (data-zoom)
la modif marche dans le html
$('[data-plan_id="1"]')[0].setAttribute('data-zoom','3')
mais vu qu’on enregistre pas il ne se passe rien.

aussi
je connais pas les zones mais si elles ont un data-plan ou id/class tu peux les faire disparaître
.hide()
les historiques je les réduisės à un pixel (effet de zoom)

Moaw… rien compris.

Pour modifier l’objet que j’affiche par widget vu que c’est buggué (la position de la zone ne marche pas ou mal) :

J’ai ajouté dans personnalisation avancée une modification du CSS (1963 est l’équipement que j’affiche par widget au clic) :

/* gestion autres alarmes */
.zoneEqLogicOnClic > [data-eqlogic_id="1963"] > .widget-name { display: none; }
.zoneEqLogicOnClic > [data-eqlogic_id="1963"] {  position:relative;top:0px;left:-350px; width:350px;height: 490px !important; border-radius: 5px !important;
  border: 2px solid ghostwhite !important; background-color: rgba(0,0,0,1) !important; }	

De ce que tu me dis, il faut créer un JS de fonction. Mais là cela devient bien lourd pour moi, surtout que c’est clairement un bug de widget au clic/survol.

Pour l’heure, je contourne le problème en veillant à où je positionne le widget. En espérant que ce bug soit solutionné. Je trouve déjà limite mon utilisation CSS car pas à l’abri d’une mise à jour Core sur cette fonction…

En tout cas merci de ton aide.

issu d’un vieux design cache affiche
auquel j’ai simplifié

Sans-titre4 (2)

fonction avec nom
si le nom est choisi sinon


  <style>

    /* methode clip-path https://bennettfeely.com/clippy/
[data-plan_id="852"] { 
   position: absolute !important;
-webkit-clip-path: inset(5% 64% 95% 37%);
clip-path: inset(5% 64% 95% 37%);
      }
     */
div.scrollmenu {
  width:100%;
         height: 100%; 
    background-color: white; /* 232A31 */
      white-space: nowrap;
  overflow: auto;
text-align: center;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.2);
  }


  div.scrollmenu a {
    text-align: center;
    padding: 8px;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
    padding-top: 5px;
      font-size: 15.5px;    
}

    .zindex3000  {
      position:relative;
      z-index:3000;
      top:0px;
      left:15px; 
      width:350px;
      height: 210px;
      border-radius: 5px !important;
  border: 2px solid ghostwhite !important; 
      background-color: rgba(0,0,0,1) !important; 
    }
    .zindex1000
    {
      position:relative;
      z-index:1000;
    top: 16px;
    left: 15px;
    transform-origin: 0 0 !important;
    width: 408px;
    height: 210px;
    min-width: 0px !important;
    min-height: 0px !important;
    }
</style>


<div>
 <div class="scrollmenu">


<la><a onclick="MenuEquip('Météo')" class="fa divers-thermometer31 fa-lg">
  <br><span>Météo</span></a></la>
   
   <!-- Presence -->
   <la><a onclick="MenuEquip('Domo')" class="fa personne-toilet1 fa-lg">
  <br><span>Domo</span></a></la>

   </div> 


				  <script type="text/javascript">
var p2d = 20;                   
var plan_2d = $('[data-plan_id="'+p2d+'"]');

                    
    function MenuEquip(animName) {    

   //  alert("yes")


 animName == "Météo"?(
plan_2d.show().attr('class', 'div_displayObject').addClass('zindex3000')
//si on y ajjoute  mettre une virgule à la fin de chaque ligne "hormis derniére ligne"
//$('[data-plan_id="1"]')[0].setAttribute('data-zoom','3')

 ) : (
plan_2d.show().attr('class', 'zindex3000').addClass('zindex1000')

//plan_2d.hide()
 )


     };
                
              </script>
                </div> 

au cas où ! avant de supprimé se test

1 « J'aime »

Bonjour @benj29,

je travaille actuellement sur mon premier design, et je suis parti sur la même idée que toi : un design mono-panel, avec des popups windows qui me donne plus d’information en cliquant sur une icone ou sur un bouton (je me suis inspire très fortement de ton design, pour bien comprendre le fonctionnement de jeedom sur ce point, et j’adapte au fur et a mesure de ma compréhension et de mes besoins).

J’avais le même problème que toi, avec des zones non cliquable quand une fenêtre popup venait recouvrir une zone cliquable. J’avais a l’origine mon design niveau 1, comme mes zones a cliquer (niveau 1). J’ai essaye de mettre mon design niveau 0, et les zones a cliquer niveau 1, toujours le même problème.
J’ai réussi a solutionner le problème en mettant mon design niveau 1, et les zones a cliquer niveau 2.
Avec cette solution, pas besoin de jouer avec le z-index, pour moi cela fonctionne correctement. La fenêtre au premier plan a priorité sur la zone de clic qui se trouve en arrière plan.

J’ai l’impression également que le design niveau 0 pose des problèmes JS (column-span:all) qui parfois ne s’exécute pas correctement, alors que ce n’est pas le cas quand mon design est au niveau 1.

Pour conclure, je vais avoir mon panel principal niveau 1, mes zones de clic niveau 2, et avec cette configuration, ça a l’air de bien fonctionner :smiley:

Benoit

Bon retour. Je n’utilise plus le span des colonnes car son contournement était facile. Pour le reste intéressant pour les suivants. Pour l’heure je dois dire que tous mes popups marchent. Étonnamment…

1 « J'aime »

Je confirme les dires de @benoit5672, impossible d’avoir une situation propre sans passer par les niveaux 1, 2 et 3.
Clairement, il ne faut pas utiliser le niveau 0.

En 1 : widget de base (cadre blanc et les boutons, infos, commandes etc)
En 2 : titre (bandeaux blancs).
En 3 : zones cliquables.

Et là plus de souci.

Tous les widgets s’affichent au clic correctement.

Well done !

Dommage la documentation mériterait d’être plus complète :