Overflow Problematico

Mirk0

Nuovo Utente
18 Ago 2021
4
0
1
Ciao, ho un problema con un overflow che è presente quando non dovrebbe, ho letto gli altri post a riguardo ma mi sembra abbiano tutti il problema opposto al mio e non sono riuscito a trovare una soluzione.
Sto cercando di costruire una semplice web app ToDo list. Ogni elemento della lista è un div.todo che è contenuto in un div.todo-container al quale ho assegnato le dimensioni.
Quando una elemento .todo viene eliminato (schiacciando sull'icona del cestino o con uno swipe-right) parte un animazione che fa traslare l'elemento verso destra e poi l'elemento viene eliminato.
Il problema è qui: l'elemento che trasla viene 'tagliato' dal contenitore anche se ho impostato overflow-x: visible sul container. Ho provato a togliere e modificare gli overflow in vari modi ma non sono mai riuscito a far vedere l'elemento oltre le dimensioni del container.
Ci sarebbe la possibilità di dare position:absolute agli elementi e relative al container ma questo poi crea una marea di altri problemi e quindi è una soluzione che vorrei evitare.

Lascio qui i file, provate sul browser ad eliminare un elemento creato e vedrete che c'è uno strano taglio sull'elemento. Se volete trovate anche tutti i file su github, nome mirk-00 e repo Todo-test.
 

Allegati

  • Todo test.zip
    4,7 KB · Visite: 19

bubino8

Utente Attivo
28 Apr 2017
360
20
28
29
BZ
Ciao buongiorno,

a me pare tutto giusto l'elemento non si taglia, devi solo aumentare il tempo di translateX nella classe removing


Ciao
Elia
 

Mirk0

Nuovo Utente
18 Ago 2021
4
0
1
Io usando chrome vedo l'elemento che si taglia, inoltre ho scoperto che overflow: visible su una direzione non è compatibile con overflow:hidden sull'altra direzione, quindi hidden viene interpretato come auto ecco perchè viene tagliato. Per risolvere ho dovuto un po' modificare la struttura della pagina e per ora ho risolto così, mantenendo le stesse funzionalità e estetica. Comunque questo 'bug' di CSS è noto da tempo a quanto pare. Non metto il link per il regolamento ma trovi più info su stackexchange.
 

Discussioni simili