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?

Storie di Agarthi ↗
Un Varco si apre davanti a te, un mondo tra i mondi è a portata di mano. Lasciati alle spalle le certezze, inizia l'avventura!

quota

Pagine → 1

pharros

SCRIVI

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

If you put your mind to it, you can accomplish anything

quota

mangamonster

SCRIVI

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:

ma niente, e si la padding-col5 è mia, è custom!!!!

Storie di Agarthi ↗
Un Varco si apre davanti a te, un mondo tra i mondi è a portata di mano. Lasciati alle spalle le certezze, inizia l'avventura!

quota

pharros

SCRIVI

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

If you put your mind to it, you can accomplish anything

quota

mangamonster

SCRIVI

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!!

Entropia Universe ↗
Lascia che il tuo avatar esplori nuovi mondi e viaggi tra i pianeti in questo stupendo MmoRpg Sci-Fi Free to Play!

quota

pharros

SCRIVI

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

If you put your mind to it, you can accomplish anything

quota

mangamonster

SCRIVI

16/04/2024 10:41:43

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