[Résolu] Div qui prend de la place là ou elle ne devrait pas

Bonjour,
Je suis en train de développer un job scheduler en Javascript(avec jQuery) et j'ai un soucis d'affichage que je n'arrive pas à résoudre.
Pas simple à exmpliquer.

Mon Job scheduler est en fait plusieurs tableau imbriqués je prend un event que je drop dans une suite de TD, une fois droppé le TD sur lequel est droppé l'évent est coloré en bleu ensuite j'ajoute deux ghost qui se superpose au tableau au début est à la fin de l'event afin de pouvoir redimensionner mon event jusque là aucun soucis.

le soucis se trouve sur les deux ghost que je drop en fait ils se positionnent bien à l'endroit ou je veux en modifiant leurs position (ex: width: 3px; height: 50px; position: relative; top: -253px; left: 743px;)
mais leur positionnement physique est plus bas sur la page et malheureusement ces deux ghost sont des div du coup ça saute une ligne pour chaque ghost que je crée alors que ceux ci sont positionné carrément autre part dans la page...
voici quelques exemples:

cercle rouge positionnement réel de mes ghosts
en jaune l'endroit physique ou sont mes ghosts
un autre exemple pour mieux comprendre:


du coup ce qui me pose problème c'est que le conteneur physique des ghosts s'agrandit chaque fois que j'ajoute un event dans le job scheduler et il faudrait qu'il ne bouge pas sans perdre le positionnement de mes ghosts...

merci d'avance et désolé pour le pâté...

Salut,

Le position: relative; fait en sorte de décaler visuellement tes éléments tout en laissant leurs "empreintes" dans le DOM comme s'ils y étaient encore. Il faut passe par de l'absolute si tu veux les sortir du flux.

le soucis c'est que si je change par de l'absolute mes éléments ne sont plus disposable correctement sur la grille...
Tu aurais une idée de comment arriver au résultat souhaité sans toucher à cette position relative?
Modifié par Fangstergangsta (24 Jul 2020 - 09:23)

Salut,

Alors j'ai vraiment du mal a savoir pourquoi tu positionnes les fantômes en dessous et surtout pourquoi c'est plus pratique pour toi de les positionner en relative plutôt qu'en absolute... En relative ils n'auront jamais la même position vu qu'ils se mettent les uns derrière les autres et quand je vois :

top: -253px; left: 743px;

Je ne peux m’empêcher que tu fais ça au pixel prêt pour chacun de tes cas hahaha

Mais c'est juste que j'ai beaucoup de mal a visualiser ce que tu as et ce que tu veux faire... Tu n'a pas du tout d'exemple en ligne ?

haha non, c'est la librairie jQuery ui resize qui s'en occupe pas moi directement et j'ai pas la main sur le absolute ou relative puisque la librairie met ça automatiquement en relative d'ou mon problème...

lorsque je drop l'event je crée directement les ghost voila une partie du code:

ghost_aft: function (t, r, p, n, i , value) {
            var concatString = "";
            var concatStringlast = "";
            var self = this;
            if(value !== undefined){
                concatString = "[data-id='"+value+"']";
                concatStringlast = ".marked:last[data-id='"+value+"']";
            }else{
                concatStringlast = ".marked:last";
            }
            $("<div>", {
                class: "ghost_aft",
                "data-id": value
            }).css({
                width: t.width(),
                height: t.height()
            }).appendTo("#testblocks").position({
                my: "left top",
                at: "right top",
                of: $(concatStringlast, r)
            }).resizable({
                handles: "e",
                resize: function (e, uiui) {
                    if (typeof $("td", r).eq(n).position() != "undefined") {
                        var elmt = $("td", r).eq(n);
                        var uiui_right = uiui.position.left + uiui.size.width;
                        /*Il faudra filtrer le prevAll() pour ne pas
                        retirer la classe "marked" de toutes les TD
                        Par exemple : elmt.nextAll(".classe_specifique_a_mon_job")*/
                        //elmt.nextAll().removeClass("marked");
                        $.each(elmt.add(elmt.nextAll()), function (index, td) {
                            if ($(td).position().left < uiui_right) {
                                var idJob = $("td", r).eq(i).data('id');
                                $(td).addClass("marked").attr('data-id', idJob);
                            }
                        });
                    }
                },

Modifié par Fangstergangsta (24 Jul 2020 - 11:56)

Ah effectivement j'avais pas compris ça... Bah sinon tu peux tenter de mettre

height:0;
width:0;
overflow:hidden;

sur le conteneur des ghost, mais je sais pas si ca va pas foirer le positionnement.

au final j'ai utilisé la propriété display:flex sur le conteneur des ghost et ça fonctionne bien!
le overflow:hidden était inefficace car je remplis mes ghost en JS du coup ça ne voulait pas marcher...
merci pour ton aide!
Modifié par Fangstergangsta (24 Jul 2020 - 15:54)