problema bootstrap e iframe
problema bootstrap e iframe postato il 15/04/2024 12:14:52 nel forum programmazione, open source e 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?
<div class="row" style="margin-left:0px;margin-right: 0px;">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 padding-col5" style="text-align: center;height:30rem;">
<iframe src="pages/presenti.inc.php?ref=20" allowtransparency="true" frameborder="0" style="height:100%;width:95%;overflow:auto"></iframe>
</div>
</div>
Pagine → 1
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
Enlisted ↗
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:
@media (min-width: 1200px)
.col-lg-6 {
width: 50%;
}
questa se la vedo fuori dall'iframe me la vede senza problemi, dentro no, mi vede solo cose tipo questo:
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
è come se le mediaquery non riuscisse a vederle, ma non capisco davvero perchè!!
nel iframe ho messo anche:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
ma niente, e si la padding-col5 è mia, è custom!!!!
Storie di Agarthi ↗
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
Sea of Conquest ↗
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!!
CRSED: F.O.A.D. ↗
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
16/04/2024 10:41:43
ok un lavoraccio insomma(che bello), ok grazie mille della risposta
Discussione seguita da
Pagine → 1
Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, Open Source e Hosting Elenco Forum
Articoli, Interviste e altre Risorse!
