Box modali Bootstrap - spostamento contenuti

[VinzClortho]

Salve a tutti,
sto provando i box modali di Bootstrap, ma ho notato un problema: lo spostamento di alcuni elementi della pagina all'attivazione del componente Modal. E' un effetto che si può notare anche nella Reference della guida di Html.it (nel mio caso è però più vistoso anche se limitato solo ad alcuni elementi).
Mi sono reso conto che il div di apertura del box modale <div id="myModal" class="modal fade">, a causa dell'effetto di overlay, ha una larghezza che comprende anche lo spazio normalmente occupato della barra dello scroll laterale, modificando la larghezza complessiva del viewport e spostando i contenuti che hanno una posizione in percentuale. Non saprei dire se è qualcosa che si può risolvere lato css o javascript (su cui non ho competenza).

Chiedo cortesemente il vostro aiuto, grazie.

[m4rko80]

E' probabile che sia la classe modal-open che viene aggiunta al body quando si apre la modale.
Togliendo questa si sposta di nuovo come in origine ma come puoi vedere/provare se la togli l'overlayer non "riempie" piu' tutta la pagina ma restano dei bordi a lato. Magari non succede su tutti i layout ma potrebbe essere la causa.

[VinzClortho]

Grazie per la risposta, quello che dici in effetti è la causa, ma ancora non riesco a trovare una soluzione. Mi spiego: quando si attiva il box modale, la classe .modal-open {overflow: hidden;} sul body nasconde la scrollbar della pagina, mentre un'altra ne viene aggiunta sopra l'overlay. Questa seconda scrollbar viene considerata parte della larghezza della pagina stessa, ed infatti lo script che genera il box modale aggiunge 17px di padding destro al body direttamente in linea, in modo da compensarne lo spazio occupato.
Purtroppo nella pagina in cui sto lavorando solo due elementi subiscono lo spostamento dei contenuti (un box di testo con posizione assoluta calcolata in percentuali per essere responsiva, ed un immagine fixata sulla sfondo ed allienata a destra), e se provo a rimuove le regole css mi devo tenere due scrollbar affiancate, ma è orribile e disfunsionale.
Il problema è comunque dell'overlay posto sopra il body. Una possibile soluzione sarebbe che la scrollbar aggiunta sopra l'overlay funzionasse come quella originaria, cioè mantenesse il proprio spazio al di fuori del viewport, ma non so se è possibile o come fare.

[m4rko80]

Potresti provare a settare e sovrascrivere da css le regole che vuoi eliminare.
Per esempio se sai che aggiunge un oveflow, metti a priori nel tuo css un overflow:hidden !important.
Se solo di css si tratta potrebbe funzionare.

[VinzClortho]

Ciao, grazie per i suggerimenti.
ti riporto il link ad una pagina di test su cui sto lavorando. Come puoi vedere, aprendo il popup con il punsante in alto a destra si affiancheranno due scrollbar (quella dalla pagina, e quella interna all'overlay). Purtroppo non posso nascondere la scrollbar verticale della pagina con la proprietà overflow: hidden sul body, perchè così facendo modificherei le dimensioni orizzondali del viewport, causando lo spostamento di alcuni elementi della pagina. Ci sto pensando da diversi giorni senza trovare una soluzione definitiva, alla fine sono arrivato al compromesso di lasciare due scrollbar, ma di provare a disabilitare (non nascondere) la scrollbar della pagina via javascript. Ho aperto un topic nell'apposita sezione per chiedere suggerimenti in questo senso, ma mi hanno accennato alla possibilità di rendere la scrollbar invisibile con le proprietà overflow e opacity, tuttavia non capisco in che modo si possa fare.
Sono in una situazione abbastanza tesa perchè ho urgenza di presentare una bozza, ma non riesco a risolvere questo cruccio. Vi ringrazio per ogni aiuto.

Pagina test

[Mich_]

Rispondo solo ad una piccola parte del tuo quesito, non so se ti sara` utile.

Qualche anno fa, quando si voleva nascondere la scrollbar, si metteva la scrollbar in un <div> a cui si dava una dimensione leggermente superiore al suo contenitore, in modo da far cadere la scrollbar fuori dall'area visibile.
... non so se questo e` adattabile al tuo caso ...

[m4rko80]

Ciao, a .popup-body aggiungi padding-right:20px e margin-right:-20px
Funziona ma devi testare su diversi formati magari.
Disabilitando overflow non e' scrollabile, cosi' scrolla comunque ma non si vede la scrollbar, va quindi ad intuizione dell'utente e sperando che non abbia un mouse da 3 euro senza tasto centrale al centro

[VinzClortho]

Ciao, a .popup-body aggiungi padding-right:20px e margin-right:-20px
Funziona ma devi testare su diversi formati magari.
Disabilitando overflow non e' scrollabile, cosi' scrolla comunque ma non si vede la scrollbar, va quindi ad intuizione dell'utente e sperando che non abbia un mouse da 3 euro senza tasto centrale al centro

Ti ringrazio per il consiglio, è una soluzione interessante, ma ho paura penalizzi l'utente, in particolare sui diversi device. Inoltre la presenza della sola scrollbar esterna che gira a vuoto, può confondere (ma spero di poterla disabilitare tramite script).

Qualche anno fa, quando si voleva nascondere la scrollbar, si metteva la scrollbar in un <div> a cui si dava una dimensione leggermente superiore al suo contenitore, in modo da far cadere la scrollbar fuori dall'area visibile.
... non so se questo e` adattabile al tuo caso ...

Ma mettendo la scrollbar in un div è possibile applicargli regole css? Come fare per selezionarla?

[VinzClortho]

Ciao, a .popup-body aggiungi padding-right:20px e margin-right:-20px
Funziona ma devi testare su diversi formati magari.
Disabilitando overflow non e' scrollabile, cosi' scrolla comunque ma non si vede la scrollbar, va quindi ad intuizione dell'utente e sperando che non abbia un mouse da 3 euro senza tasto centrale al centro

Ti ringrazio per il consiglio, è una soluzione interessante, ma ho paura penalizzi l'utente, in particolare sui diversi device. Inoltre la presenza della sola scrollbar esterna che gira a vuoto, può confondere (ma spero di poterla disabilitare tramite script).

Qualche anno fa, quando si voleva nascondere la scrollbar, si metteva la scrollbar in un <div> a cui si dava una dimensione leggermente superiore al suo contenitore, in modo da far cadere la scrollbar fuori dall'area visibile.
... non so se questo e` adattabile al tuo caso ...

Ma mettendo la scrollbar in un div è possibile applicargli regole css? Come fare per selezionarla?

[Mich_]

Ma mettendo la scrollbar in un div è possibile applicargli regole css? Come fare per selezionarla?

Certo.
A tutti gli oggetti HTML puoi applicare le regole CSS.

Esempio:

HTML:
<div id="pippo"> ... </div>

CSS:
#pippo {   /* selettore dell'oggetto con id="pippo" */
  width: ...;
  height: ...;
  overflow: ...;
}

Per ulteriori info sui selettori, vedi il tuo manuale preferito alla voce selettori