Non riesco a fare scrollare la finestra modale.

[d.force]

Non riesco a fare scrollare la finestra modale.

Salve a tutti, sul mio sito, cliccando su un pulsante si apre una finestra (modal) informativa.

Il problema è che su dispositivo mobile - poichè la finestra ha abbastanza contenuti - ho bisogno che scrolli, altrimenti parte dei contenuti non vengono visualizzati.

Di seguito una screen.

Grazie per il vostro aiuto.

[shazarak]

@d-force dovrebbe essere qualcosa tipo :
overflow-x: hidden;
overflow-y: auto;

sulla classe .modal

pero a vedere da qui: https://getbootstrap.com/docs/4.0/components/modal/

sembra che nel tuo codice manchi un div di classe .modal-dialog anche lui in position:relative, magari aiuta aggiungerlo

[d.force]

Grazie @shazarak ho provato ma non funziona...

Il sito però non è basato su Bootstrap.

[shazarak]

@d-force alura mi spiego meglio

hai usato un html per il modale prendendolo probabilmente da qui
https://www.w3schools.com/howto/howto_css_modals.asp
ma la classe .modal che usi qui dentro:
<div id="myModal" class="modal">

prende le istruzioni da
https://www.visitmontaione.com/wp-content/themes/hongo/assets/css/bootstrap.min.css?ver=3.3.6

che sovrascrive
https://www.visitmontaione.com/wp-content/themes/hongo-child/altrostile.css?ver=5.8.1

in questo tutorial
https://www.w3schools.com/howto/howto_css_modals.asp

nei commenti del codice ti dice nel css di .modal
overflow: auto; /* Enable scroll if needed */

mentre nel tuo sito, prendendo il css di bootstrap, ti mostra un overflow: hidden;

da qui la mia supposizione che o usi il css di bootstrap e come lo gestisce lui ( diciamo cosi)
oppure fai in modo che la classe .modal ( che è piuttosto generica e può venire sovrascritta facilmente) prenda le regole css corrette e volute

detto cio, io ho fatto la prova modificando il dom direttamente , e a me scrollava senza problemi ( ma magari ho visto male)

edit: il css viene sovrascritto perche pubblichi prima altrostile.css in riga 88 e poi bootstrap.css in riga 107

[d.force]

@shazarak ha detto in Non riesco a fare scrollare la finestra modale.:

@d-force alura mi spiego meglio

hai usato un html per il modale prendendolo probabilmente da qui
https://www.w3schools.com/howto/howto_css_modals.asp
ma la classe .modal che usi qui dentro:
<div id="myModal" class="modal">

prende le istruzioni da
https://www.visitmontaione.com/wp-content/themes/hongo/assets/css/bootstrap.min.css?ver=3.3.6

che sovrascrive
https://www.visitmontaione.com/wp-content/themes/hongo-child/altrostile.css?ver=5.8.1

in questo tutorial
https://www.w3schools.com/howto/howto_css_modals.asp

nei commenti del codice ti dice nel css di .modal
overflow: auto; /* Enable scroll if needed */

mentre nel tuo sito, prendendo il css di bootstrap, ti mostra un overflow: hidden;

da qui la mia supposizione che o usi il css di bootstrap e come lo gestisce lui ( diciamo cosi)
oppure fai in modo che la classe .modal ( che è piuttosto generica e può venire sovrascritta facilmente) prenda le regole css corrette e volute

detto cio, io ho fatto la prova modificando il dom direttamente , e a me scrollava senza problemi ( ma magari ho visto male)

Sei un Grande!
Ma perdona la mia ignoranza...
Non è che potresti mandarmi un esempio su jsfiddle? Così magari vedo il codice esatto?

Io avevo fatto questo: https://jsfiddle.net/yuvgm9nj/

Grazie 1000!

[shazarak]

@d-force il codice di questo https://www.w3schools.com/howto/howto_css_modals.asp sarebbe corretto, le possibili problematiche le puoi avere su altri css che sovrascrivono le impostazioni o particolari regole css a monte (contenitori genitori) che di creano fastidio

fai una semplice prova: cambia il nome della classe .modal in .modale o .modal2 e cambia in tutto il codice html, css e javascript, dove viene usata la classe vecchia metti quella nuova.

es. <div id="myModal" class="modal2">

.modal2 {
display: none; /*

ecc

oppure, nel tuo altrocss metti overflow:auto!important

e vedi che succede

[d.force]

Provo subito!

[d.force]

@shazarak

E' bastato mettere overflow:auto!important ed ha funzionato!

Grazie 1000 shazarak sei stato gentilissimo!!!

Buona serata!