Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Jquery 3 problema con datepicker che si posiziona erratamente

    Buongiorno,

    utilizzando datepicker con jqueri-ui v. 1.12.1 e jquery 3.4.1 oppure 3.5.1, i miei calendari in determinati posti si posizionano in modo errato, per la precisione pi� in basso del campo imput, il calendario funziona perfettamente e fa tutto quello che deve fare, il problema � solo di posizionamento.
    Se rimetto la versione 2.2.4 di jquery, tutto torna a funzionare perfettamente, ovvero il calendario si apre appena sotto il campo input interesato.

    Ho caricato come consigliato sul sito jquery il jquery-migrate plugin per controllare eventuali comandi non pi� supportati o deprecati e non ricevo nessun errore da nessuna parte.

    La cosa che ho notato � questa: la maggior parte dei form interessati sono contenuti in una modale di mia costruzione (ma questo non cambia nulla), dove si presenta il problema, ho provato svariate cose per capire il perch� di questo strano comportamento, ho modificato gli id dei campi, in caso ci fossero conflitti con ci� che c'� sotto la modale, ho settato in maniera pi� profonda il percorso all'elelemento passato alla funzione datepicker, ho provato ad eliminare il plugin per la migrazione di versione, ma tutto senza effetto.

    Ho poi notato una cosa, sotto alla modale che contiene il form c'� una lista di record rappresentata graficamente, ogni blocco rappresenta un record e la modale che apro, serve per modificare tale record dal form che contiene anche il campo data, pi� il record � in basso nella lista, pi� il calendario in modifica si sposta pi� in basso. Ho quindi provato dalla console, dopo aver aperto la modale, ad eliminare la lista dal DOM e magia tutto torna al suo posto, il calendario si apre dove dovrebbe.
    Non capisco cosa possa essere e come cercare di capirlo, ho anche eliminato un pezzo alla volta parti di marckup dei blocchi, ma con pochi cambiamenti, sembra palese che qualcosa li dia fastidio e lo da solo con jquery 3...

    Sapreste darmi una mano a capire questa cosa allucinante?

    Grazie

  2. #2
    Niente, non riesco a trovare dove sia il problema, al momento ho aggirato il problema, anche se mi piacerebbe evitare, al momento ho fatto così:

    Ho creato una funzione che esegue il calcoli di dimensioni, altezza da top e bottom e tutti i dati che servono
    codice:
    var position = function(id){
            setTimeout(function(){ 
                // Ricavo altezza elemento
                var element = document.getElementById(id);
                var elemHg = element.offsetHeight;
                
                // Ricavo altezza calendario
                var cal = document.getElementById("ui-datepicker-div");
                var calHg = cal.offsetHeight;
                
                if(window.innerHeight - element.getBoundingClientRect().bottom + elemHg < calHg){
                    // Metto sopra
                    var pos = element.getBoundingClientRect().top - calHg;
                    $('#ui-datepicker-div').css({"top":set});
                }else{
                    // Metto sotto
                    var pos = element.getBoundingClientRect().top + elemHg;
                }
                
                $('#ui-datepicker-div').css({"top":pos});
                
            }, 0);
        };

    poi nelle chiamate al datepicker ho aggiunto:
    codice:
    beforeShow: function(){
        position(this.id);
    }
    Funzionare funziona perfettamente, ma preferirei evitare, se vi vengono idee sono ben accette
    Ultima modifica di serialkiller; 23-10-2020 a 16:46

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.