/* * Modal Fix -- override di Bootstrap 4 * * Risolve quattro problemi: * 1. Il contenitore del modal deve essere fisso rispetto al viewport (non al documento) * 2. Nessun height:100vh sul contenitore -- rompe su mobile con chrome bar dinamica * 3. Lo scroll avviene solo nel .modal-body interno; il body della pagina viene bloccato * 4. I dropdown Select2 aperti dentro una modal o uno swal non vengono troncati * dall'overflow:hidden del contenitore * * Questo file viene incluso da include/custom/top.php DOPO gli asset standard, * cosi' ha la precedenza su Bootstrap e su style.css. */ /* --------------------------------------------------------------------------- 1. Contenitore esterno: posizionato rispetto al viewport, senza height:100vh --------------------------------------------------------------------------- */ .modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; } /* --------------------------------------------------------------------------- 2. Blocco scroll del body quando il modal e' aperto. Bootstrap aggiunge .modal-open al body automaticamente; padding-right:0 evita il layout shift da scrollbar scomparsa. --------------------------------------------------------------------------- */ body.modal-open { overflow: hidden !important; padding-right: 0 !important; } /* --------------------------------------------------------------------------- 3. Solo .modal-body scrolla; .modal-dialog e .modal-content usano flex per contenere il contenuto entro il viewport senza overflow esterno. --------------------------------------------------------------------------- */ .modal-dialog { max-height: calc(100vh - 3.5rem); margin: 1.75rem auto; display: flex; flex-direction: column; } .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); overflow: hidden; } .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; /* scroll fluido su iOS */ } /* --------------------------------------------------------------------------- Responsive: su schermi piccoli riduci i margini per sfruttare tutto il viewport --------------------------------------------------------------------------- */ @media (max-width: 576px) { .modal-dialog { max-height: calc(100vh - 1rem); margin: 0.5rem auto; } .modal-content { max-height: calc(100vh - 1rem); } } /* --------------------------------------------------------------------------- 4. Fix Select2 dropdown dentro modal Bootstrap e SweetAlert2 Problema: .modal-content e .modal-body hanno overflow:hidden / overflow-y:auto, il che crea un nuovo overflow context. Il pannello .select2-dropdown, anche se posizionato in absolute/fixed, viene ritagliato da questo contesto. Soluzione: Select2 con tema bootstrap4 usa il come dropdownParent di default, quindi il dropdown esce dal DOM della modal. Garantiamo che il z-index sia corretto e che il wrapper Select2 che resta dentro la modal (la selection box) non venga tagliato. --------------------------------------------------------------------------- */ /* Il pannello risultati e' renderizzato come figlio diretto del da Select2. z-index 1070 > modal (1050) > backdrop (1040). */ .select2-container--open .select2-dropdown { z-index: 1070 !important; } /* Il wrapper Select2 che rimane nella modal (la selection box, non il dropdown) non deve essere tagliato dall'overflow context della modal. */ .modal-body .select2-container, .modal-body .select2-container--bootstrap4 { overflow: visible !important; } /* Stesso fix per SweetAlert2: il pannello .swal2-html-container puo' avere overflow limitato che taglia il dropdown Select2 al suo interno. */ .swal2-html-container .select2-container, .swal2-html-container .select2-container--bootstrap4 { overflow: visible !important; } /* SweetAlert2 usa z-index 1060 per .swal2-container; il dropdown deve stare sopra. */ .swal2-container .select2-container--open .select2-dropdown { z-index: 1080 !important; }