problema bootstrap e iframe

problema bootstrap e iframe postato il 15/04/2024 12:14:52 nel forum programmazione, gdrcd, open source, hosting

scusate sto cercando di far leggere le mediaquery di bootstrap all'interno di un iframe, ma niente mi legge tutto(per cui i css li prende bene), ma non riesco a fargli leggere le mediaquery, qualcuno lo conosce e sà aiutarmi?

Hero Wars ↗
Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

quota

15/04/2024 15:17:55

uhm non hai fornito tanti dettagli quindi non so bene come aiutarti però proviamoci!

Di preciso cos'è che non funziona? E dove? Che versione di bootstrap stai usando? La classe padding-col5 non la riconosco uhm immagino sia custom

quota

15/04/2024 15:27:24

Allora la versione usata è l'ultima, credo sia la v5.3.3, non mi legge il media delle classi col, non mi setta la width giusta tipo:

Hero Wars ↗
Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

quota

15/04/2024 15:55:50 e modificato da pharros il 15/04/2024 15:56:38

mi sembra di capire che ti serve applicare le classi bootstrap in elementi che vengono caricato DENTRO l'iframe, giusto?

In questo caso, devi importare bootstrap anche nell'header della pagina che carichi dentro l'iframe o non funzionerà (se è un header comune dovrebbe esserci però per sicurezza controlla). Il contenuto degli iframe è una pagina a se stante, quindi non eredita i css della pagina principale

quota

16/04/2024 09:39:14

magari sono io che non riesco a spiegarmi bene, dentro la pagina inclusa nell'iframe c'e' tutto, bootstrap.css, bootstrap-min.css, bootstrap-theme.min.css, bootstrap-theme.css, jquery-ui.min.css e all.min.css(la stessa identica cosa presente nella main principale), tant'è che le classi all'interno della pagina inclusa me le vede, ma non mi vede appunto le mediaquery!!

Exclusive Villa GdR ↗
Las Vegas, azzardo, vizi, soldi, intrighi... Più le sue luci sono scintillanti, più le sue ombre sono oscure. La città che non dorme mai, vi aspetta.

quota

16/04/2024 10:19:47

Ok ho capito il problema allora. Le media query dentro gli iframe non funzionano perché il viewport dell'iframe è diverso da quello del parent. Mi spiego meglio:

supponiamo che la tua viewport (l'area visibile sul browser; insomma, la dimensione della finestra) sia 1920x1080. L'iframe invece è largo, ad esempio (numeri a caso) 300x800 (o quale che sia l'altezza) perché relegato all'interno di una colonna. Il viewport del contenuto dell'iframe sarà di 300x800, NON di 1920x1080.

Di conseguenza, le mediaquery che riguardano il contenuto dell'iframe vanno tarate sul vieport dell'iframe, NON della finestra del browser. Quel che ti conviene fare è scrivere delle media query nella pagina principale che vadano a ridimensionare l'iframe e poi, all'interno dell'iframe, scrivere delle mediaquery che vadano a modificare il contenuto dell'iframe in base alla sua nuova dimensione. Bootstrap, tuttavia, non funzionerà perché per lui l'iframe si troverà sempre in ambito "mobile" per così dire, visto che è piccolo.
Credo esistano dei "trucchetti" con javascript per ingannare l'iframe e dargli dimensioni interne pari a quelle del viewport principali, ma sarebbe un workaround e francamente non lo consiglio

quota

16/04/2024 10:41:43

ok un lavoraccio insomma(che bello), ok grazie mille della risposta

Game of Thrones ↗
Pronto a diventare il Signore dei Sette Regni? Guida la tua grande casata in epiche battaglie PvP ed esplora il mondo di Westeros!

quota