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?

World of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

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:

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

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

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

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

FragPunk ↗
Gioco d'azione frenetico ispirato al punk, con gameplay caotico, ribelle ed energia illimitata! Gioca gratuitamente!

quota