Problema iframe reponsive
Autor: Luigi I.Salve, è stato creato un calcolatore in php reponsive ecco il link di prova per farvelo vedere https://www.lapizzachevorrei.it/archivio/studio/napoletana.php. Se provate a restringere il browser la pagina si adatta correttamente alla dimensione della finestra. Questo calcolatore dovrei integrarlo nel mio sito e precisamente in questa pagina https://www.lapizzachevorrei.it/calcolapizza.php. Se visitate questa pagina, vedrete che ho già provato ad inserire con Iframe, il calcolatore al suo interno ma se provate a restringere il browser vedrete che il calcolatore non si adatta alle varie grandezze. Il primo link si adatta perfettamente anche su smartphone ma integrato nel sito non va. E' risolvibile?
Vi scrivo anche l'iframe che ho utilizzato
<iframe src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php" width="1200" height="1450">
<p>Your browser does not support iframes.</p>
</iframe>
Non ho molte competenze di programmazione e questo codice l'ho trovato su internet. Forse è errato questo?
Come potrei risolvere, sperando che si possa fare?
Vi ringrazio in anticipo
Autor
Scusate ho sbagliato il primo link. Ecco quello giusto https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php
Autor
Salve, in parte penso di aver risolto anche se non in modo ottimale.
Il codice Iframe utilizzato è questo:
<div class="content">
<div class="embed-container">
<iframe
frameborder="0"
scrolling="yes"
framespacing="0"
width="1200"
height="1900x"
src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php"></iframe>
</div>
</div>
ed il CSS inserito nella sezione esperto è questo:
.content {
width: 100%;
height: 100%;
margin: 0px auto;
}
.embed-container {
height: 100vh;
width: 120%;
padding-bottom:80%;
position: relative;
}
.embed-container iframe {
min-width: 100%;
width: 10px;
height: 95%;
position: absolute;
top: 0;
left: 0;
}
Il risultato è questo: http://www.lapizzachevorrei.it/calcolapizza.php Come noterete alla base del calcolatore, non riesco a far sparire la barra di scorrimento orizzontale.
Suggerimenti?
Grazie
...ma perchè non metti il codice direttamente nella pagina ?
altrimenti prova ad aggiungere questo:
<style>
#imContentContainer {
overflow-x:hidden;
}
</style>
Autor
Non ho capito Claudio Scusami
Autor
Quale codice dovrei mettere?
quello che hai messo qui
https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php
lo metti nella tua pagina...
senza usare l'iframe
Autor
Scusa l'ignoranza ma come lo dovrei fare?
Autor
Ignoro la procedura
come hai fatto quella pagina linkata che funzia?
opppssssss.....visto adesso che non la hai fatta tu...
prova a leggere anche qui:
http://www.unofficialwsx5.com/index.php?topic=1646.msg11989#msg11989
ancora non ho capito quale codice applicare...
ho fatto una prova qui:
http://www.mirboprova.altervista.org/@beta_14-2/pagina-8.html
grazIe Mirko, siccome sono da Smartphone, che codice CSS hai usato?
Autor
Mirko perfetto!! E' quello che vorrei fare io. Mi diresti gentilmente la procedura? Il codice da inserire e dove?
Attendo con ansia.
Grazie
grazIe Mirko, siccome sono da Smartphone, che codice CSS hai usato?
ma stai rispondendo per Luigi, o siete la stessa persona???
Autor
Io sono Luigi :-) E dal link che hai messo della tua prova è giusto quello che servirebbe a me. Non avendo nozioni su come fare, gentilmente potresti scrivere come fare? Da quello che ho capito invece di inserire all'interno della pagina un Iframe, dovrei creare una pagina, entrare nelle proprietà della pagina, andare nella sezione esperto e poi?
Grazie mille della tua disponibilità
sono un'altra persone Mirko, e sarei itneressato alla risoluzione di questo iframe "responsive"
Ecco il codice Luigi:
OGGETTO HTML
<iframe src="https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php" width="100%" height="1600px"></iframe></div>
CODICE CSS (DENTRO OGGETTO HTML)
#frame {
position:absolute;
top: 230px;
left: 0px;
width: 100%;
overflow-y:hidden !important;
}
Autor
Scusami ed armati di pazienza :-) Questo è il codice da inserire in Iframe o nella pagina?
Autor
Scusami ancora, ho capito. Quello è il codice da inserire nell'oggetto HTML. Ma io vorrei inserirlo proprio nella pagina come ha fatto Mirko nel suo esempio
in proprietà pagina>>>prima della chiusura del tag body:
<div id="frame">
<iframe src="https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php" width="100%" height="1600px"></iframe>
</div>
in proprietà pagina>>>prima della chiusura del tag Head:
<style>
#frame {
position:absolute;
top: 230px;
left: 0px;
width: 100%;
overflow-y:hidden !important;
}
</style>
il solito codice di KolAsim....
Autor
Non succede nulla :-(
in basso nell'anteprima mi esce questa riga
https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php">" target="_blank" rel="nofollow">https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php">https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php">" width="100%" height="1600px">
Autor
Ora che hai corretto ed io ho inserito i codici, il calcolatore mi si visualizza ma a metà calcolatore c'è la barra footer. Lo taglia a metà in orizontale
Autor
Mi si sovrappone il calcolatore al resto della pagina. Ma il calcolatore deve stare solo nella pagina?
ho modificato il mio esempio, perchè avevi tolto la tua pagina dal link e non funzionava più, ma se metti un link per vedere il tuo esempio di adesso, si potrà capire di più...
Autor
Io ho risolto in questo modo: Ho inserito nella pagina un oggetto html vuoto dove ho impostato solamente la lunghezza della pagina così la pagina stessa si allunga in verticale ed il calcolatore in basso non si va a sovrapporre al footer
ecco qui: https://www.lapizzachevorrei.it/calcolapizza.php
Si poteva fare anche la pagina totalmente vuota? Se si può fare rimetto la cartella di esmpio per provare
Autor
Se notate però come ho fatto io, scorrendo la pagina in alto, trema. C'è qualcosa che non va?
Comunque se dovesse servire ecco il link https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php
Se si può far diversamente nella maniera di Mirko, forse è meglio
Grazie
Autor
Sul tablet si vede bene ma sul telefonino Iphone, compare prima il footer sotto al calcolatore ...Uffa pensavo di aver risolto
Vi allego screenshot
... il codice che hai usato è sempre quello in IFRAME proposto da Mirko...
... per il resto, per quel che si vede dallo STAMP, penso che potrebbe essere una questione di livelli; ...prova ad assegnare al contenitore dell'IFRAME un livello più alto rispetto al footer...
... penso anche che potresti avere un intabellamento più regolare se nello <STYLE> della pagina PHP elimini alla voce table la stringa: width:45%;
.
Autor
Scusami KoalAsim ma il codice che ho messo è questo (anche se nel sito il percorso è diverso)
in proprietà pagina>>>prima della chiusura del tag body:
<div id="frame">
<iframe src="https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php" width="100%" height="1600px"></iframe>
</div>
in proprietà pagina>>>prima della chiusura del tag Head:
<style>
#frame {
position:absolute;
top: 230px;
left: 0px;
width: 100%;
overflow-y:hidden !important;
}
</style>
Non trovo la voce table la stringa: width: 45%
Grazie
... infatti mi riferivo proprio al div_custom+iframe...
... per la pagina PHP da correggere mi riferivo a quella che importi, e che nel sorgente (Ctrl+U) trovi al rigo 11, ... e che devi editare nel Blocco Note di Windows...
.
Autor
E li li toglierò la voce indicata precedentemente . Ci provo
Autor
Ho effettuato l'eliminazione della stringa table ecc.... ma mi si restringe solamente il calcolatore su pc ma sullo smartphone non cambia nulla. Rimetto la stringa perchè lo preferisco più largo il calcolatore su pc.
Autor
Allungando l'altezza dell'oggetto html si ottiene che il calcolatore si allontana dal footer da pc ma da smartphone non cambia nulla
... non so cosa hai fatto, ma la tabella non dovrebbe restringersi col suggerimento precedente, se non dopo che si si ristretta la finestra...
... per il telefonino (<480<), per vedere la tabella tutta estesa, forse! dovresti assegnare almeno 2200 pixel di altezza; ... e forse dovresti/potresti anche controllare il layout tramite le media query (@media), assegnando di volta in volta l'altezza corretta rispetto ai vari intervalli relativi ai breakpoint attivi
.
prova a riguardare ora il mio link, al codice di prima ho aggiunto questo:
<style>
#frame {
position:absolute;
top: 230px;
left: 0px;
width: 100%;
overflow-y:hidden !important;
z-index:20000;
}
</style>
@Luigi, scusa , puoi allegare qui la pagina
https://www.lapizzachevorrei.it/archivio/studio/calcolapizza5/napoletana.php
in formato zip
che volevo fare una prova...
Autor
Eccolo
Autor
Ho sostituito il codice con questo ma rimane invariato su tablet e iphone
allora cosi, guardalo anche da tablet e smartphone se funzia:
http://www.mirboprova.altervista.org/@beta_14-2/pagina-34.php
io ho provato anche il mio primo link, e funziona perfetto da smartphone....(prova a pulire la cache)...uso il galaxy 8 ...
Autor
Ho provato e sul tablet funziona. Su smartphone se lo capovolgo in orizontale si vede bene ma in verticale c'è lo stesso problema. Ho provato anche sul cell di mia moglie e stesso difetto. Boh. domani provo su altri cell.
Grazie
ma quale sarebbe il problema???
mi sembra strano, io li vedo tutti e 2 perfetti....
... non hai ancora controllato l'esempio di Mirko e comunicato come lo vedi sui tuoi dispositivi, e che non fa uso di IFRAME, che invece tu continui ad usare...
.
Autor
Ciao, allora io ho inserito l'oggett Iframe vuoto, semplicemente impostando l'altezza dell'oggetto a 2300 che mi dà lo spazio necessario a far stare dentro la pagina il calcolatore. Se tolgo l'oggetto Iframe, la pagina si accorcia ed il calcolatore si sovrappone al footer. Io ho inserito cone spiegato da Mirko i codici ma nell'esempio di Mirko si vede correttamente, al mio sito ho questo problema. E' un dato certo, l'errore sarà sicuramente mio da qualche parte.
la pagina la devi lasciare vuota, il resto va tutto in proprietà pagina, oppure come ultimo link, tutti i codici della pagina che hai linkato, in oggetto html e la pagina in php....
Autor
Allora riepilogo com'è fatta la pagina, seguendo i vostri consigli. Nella proprietà della pagina, nella sezione esperto ho inserito:
<div id="frame">
<iframe src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php" width="100%" height="2300px"></iframe>
</div>
<style>
#frame {
position:absolute;
top: 230px;
left: 0px;
width: 100%;
overflow-y:hidden !important;
z-index:20000;
}
</style>
Ora lasciando la pagina con solamente l'oggetto di translate di google
ed oggetto testo sotto, il calcolatore si sovrappone al footer. Se invece inserisco l'oggetto "html" vuoto, semplicemente impostando la lunghezza dell'oggetto a 2300, allora il calcolatore ci sta dentro senza sovrapporsi, però sul telefonino questo non succede e si sovrappone ugualmente.
Detto questo, se secondo voi il codice soprascritto è giusto, allora mi arrendo e lascio così. Tutto sommato per smartphone Android già c'è l'app dedicata come calcolatore, per IOS è in fase di sviluppo. Era solo per i detentori di Iphone di poter utilizzare la versione web in attesa del rilascio dell'app dedicata.
Grazie
Autor
Ho notato ora un'altra cosa. Scorrendo la pagina del calcolatore verso il basso, la barra del menù in alto viene coperta dal calcolatore :-(
e togliendo questo: ???
z-index:20000;
Autor
Scusami Mirko non ho capito. Ma metterlo nella pagina non è il procedimento sopra scritto? Cioè nella proprieta della pagina? Oppure c'è un altro modo?
Grazie
Autor
Intanto ho eliminato z-index:20000;
così il calcolatore non si sovrappone più alla barra superiore delle pagine quando si scorreva verso il basso
Autor
Cioè volevo dire la barra superiore del menù delle pagine del sito
il metodo sopra scritto è fatto con iframe, invece io intendevo mettere i codici direttamente nella pagina, come avevo mostrato nell'ultimo link...
Autor
Perdonami Mirko, sicuramente sono io che non capisco. Io non ho inserito un Iframe ma ho messo i codici nella pagina come ho scritto sopra e lo riscrivo qui
nella proprietà della pagina, nella sezione esperto ho inserito:
<div id="frame">
<iframe src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php" width="100%" height="2300px"></iframe>
</div>
<style>
#frame {
position:absolute;
top: 230px;
left: 0px;
width: 100%;
overflow-y:hidden !important;
z-index:20000;
}
</style>
Poi nella pagina ho messo il widget "html" con lungherzza 2300 per allungare la pagina ma senza nessun codice . Se non metto questo widget la pagina è corta ed il calcolatore si sovrappone a tutto il resto.
Probabilmente ho sbagliato a metter questi? Ma così ho fatto. Se ho sbagliato mi sapete indicare i codici giusti?
Grazie per la vostra pazienza
infatti quello è iframe:
<iframe src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php....
l'altro link era con codice nella pagina, ma lo ho già eliminato, perchè avevo visto che non ti facevi più sentire e sei andato su Unofficial a chiedere...
caso mai lo rimetto...
Autor
Scusami Mirko, erroneamente avevo messo questo di codice (iframe) e non funzionando ho chiesto anche li.
Le sto provando tutte :-)
Grazie
Autor
Resto in attesa del codice.... Grazie mille
Autor
Altro problema notato. Se tolgo z-index:20000; la barra del menu in alto rimane sopra il calcolatore ma il calcolatore non è più editabile. Cioè non mi fa inserire i dati per fare i calcoli.
Ora ho riaggiunto questo codice e rifunziona anche se il calcolatore va a finisre sopra al menu quando si scorre verso il basso.
Spero di risolvere con il codice di Mirko.
Grazie
con il codice diretto nella pagina non avrai nessun problema...
lo ho messo qui per prova, vedi se funziona in tutti i tuoi apparecchi, poi lo proviamo ad inserire da te...
http://www.mirboprova.altervista.org/prova/pagina-12.php
Autor
ho provato su Iphone e funziona bene. :-)
ok, se vuoi mandami una mail che trovi nel mio profilo e procediamo a metterlo, altrimenti qui facciamo un Post kilometrico...
Autor
Mandata Grazie! :-)
spedito tutto...
facci sapere il risultato....
Autor
Il travaglio è lungo :-) ti ho riscritto Mirko
Autor
Con il prezioso aiuto di Mirko e la sua immensa pazienza, sono riuscito ad inserire il codice del mio calcolatore direttamente nell'oggetto html. https://www.lapizzachevorrei.it/calcolapizza.php
Grazie infinete e buon fine settimana a tutti voi
...bene... , come avevo suggerito dal mio primo post, e per quello ti ho fatto postare il file PHP
...visto che hai risolto chiudi il post...
ma prima nelle prove, non appariva la barra di scroll, ora appare di nuovo, specie nei breackpoint bassi si nota.... cosa hai toccato adesso???
Autor
Ora funziona!!!!! Grazie Mirko