WebSite X5Help Center

 
Luigi I.
Luigi I.
User

Problema iframe reponsive  it

Autore: Luigi I.
Visite 1772, Followers 2, Condiviso 0  

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

Postato il
73 RISPOSTE - 4 UTILI - 1 CORRETTO
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
Claudio D.
Claudio D.
Moderator
Utente del mese IT

...ma perchè non metti il codice direttamente nella pagina ?

Leggi di più
Postato il da Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

altrimenti prova ad aggiungere questo:

<style>
#imContentContainer {
overflow-x:hidden;
}
</style>

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Non ho capito Claudio Scusami

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Quale codice dovrei mettere?

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Scusa l'ignoranza  ma come lo dovrei fare?

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Ignoro la procedura

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

come hai fatto quella pagina linkata che funzia?

Leggi di più
Postato il da Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

opppssssss.....visto adesso che non la hai fatta tu...surprised

Leggi di più
Postato il da Mirko Boschetti
Tommaso Tarallo
Tommaso Tarallo
User

ancora non ho capito quale codice applicare...

Leggi di più
Postato il da Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User

grazIe Mirko, siccome sono da Smartphone, che codice CSS hai usato?

Leggi di più
Postato il da Tommaso Tarallo
Luigi I.
Luigi I.
User
Autore

Mirko perfetto!! E' quello che vorrei fare io. Mi diresti gentilmente la procedura? Il codice da inserire e dove?

Attendo con ansia. 

Grazie

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator
SitiWeb App
ancora non ho capito quale codice applicare...
SitiWeb App

grazIe Mirko, siccome sono da Smartphone, che codice CSS hai usato?

ma stai rispondendo per Luigi, o siete la stessa persona???

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

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à

Leggi di più
Postato il da Luigi I.
Tommaso Tarallo
Tommaso Tarallo
User
Mirko Boschetti
SitiWeb App ancora non ho capito quale codice applicare... SitiWeb App grazIe Mirko, siccome sono da Smartphone, che codice CSS hai usato? ma stai rispondendo per Luigi, o siete la stessa persona???

sono un'altra persone Mirko, e sarei itneressato alla risoluzione di questo iframe "responsive"

Leggi di più
Postato il da Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User
Luigi I.
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à

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;

}

Leggi di più
Postato il da Tommaso Tarallo
A. Kris
A. Kris
User
Mirko Boschetti
altrimenti prova ad aggiungere questo: <style> #imContentContainer { overflow-x:hidden; } </style>
questo codice avevo usato pure io per un periodo per un errore nel codice inserito (poi risolto l'errore non serve piu), ma purtroppo sballava le pagine ed il footer sullo smartphone.

Leggi di più
Postato il da A. Kris
Luigi I.
Luigi I.
User
Autore

Scusami ed armati di pazienza :-) Questo è il codice da inserire in Iframe o nella pagina?

SitiWeb App
Luigi I. 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à 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; }
Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

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....wink

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Mi si sovrappone il calcolatore al resto della pagina. Ma il calcolatore deve stare solo nella pagina?

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

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ù...

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Sul tablet si vede bene ma sul telefonino Iphone, compare prima il footer sotto al calcolatore ...Uffa pensavo di aver risolto

Vi allego screenshot

Leggi di più
Postato il da Luigi I.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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%;

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.



Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Luigi I.
Luigi I.
User
Autore

E li li toglierò la voce indicata precedentemente . Ci provo

 ‪ KolAsim ‪ ‪
... 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... .
Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

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.

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Allungando l'altezza dell'oggetto html si ottiene che il calcolatore si allontana dal footer da pc ma da smartphone non cambia nulla

Leggi di più
Postato il da Luigi I.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Luigi I.
... ... ma mi si restringe solamente il calcolatore su pc ma sullo 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

.



Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Mirko Boschetti
Mirko Boschetti
Moderator

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>

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Ho sostituito il codice con questo ma rimane invariato su tablet e iphone

Mirko Boschetti
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>
Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

io ho provato anche il mio primo link, e funziona perfetto da smartphone....(prova a pulire la cache)...uso il galaxy 8 ... innocent

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore
Mirko Boschetti
allora cosi, guardalo anche da tablet e smartphone se funzia: http://www.mirboprova.altervista.org/@beta_14-2/pagina-34.php

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

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator
Luigi I.
Mirko Boschetti allora cosi, guardalo anche da tablet e smartphone se funzia: http://www.mirboprova.altervista.org/@beta_14-2/pagina-34.php ....... Su smartphone se lo capovolgo in orizontale si vede bene ma in verticale c'è lo stesso problema.... Grazie

ma quale sarebbe il problema???

mi sembra strano, io li vedo tutti e 2 perfetti....innocent

Leggi di più
Postato il da Mirko Boschetti
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Luigi I.
... ... ... ... ... ...  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

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

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Luigi I.
Luigi I.
User
Autore

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.

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

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....wink

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Allora riepilogo com'è fatta la pagina, seguendo i vostri consigli. Nella proprietà della pagina, nella sezione esperto ho inserito:

  • Prima della chiusura del tag BODY:  

<div id="frame">

<iframe src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php" width="100%" height="2300px"></iframe>

</div>

  • Prima della chiusura del tag HEAD: 

<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

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Ho notato ora un'altra cosa. Scorrendo la pagina del calcolatore verso il basso, la barra del menù in alto viene coperta dal calcolatore :-(

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

e togliendo questo: ???

z-index:20000;

Leggi di più
Postato il da Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator
Claudio D.
...ma perchè non metti il codice direttamente nella pagina ?
Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Intanto ho eliminato z-index:20000;

così il calcolatore non si sovrappone più alla barra superiore delle pagine quando si scorreva verso il basso

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Cioè volevo dire la barra superiore del menù delle pagine del sito

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator
Luigi I.
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

il metodo sopra scritto è fatto con iframe, invece io intendevo mettere i codici direttamente nella pagina, come avevo mostrato nell'ultimo link...

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

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:

  • Prima della chiusura del tag BODY:  

<div id="frame">

<iframe src="https://www.lapizzachevorrei.it/archivio/calcolapizza/napoletana.php" width="100%" height="2300px"></iframe>

</div>

  • Prima della chiusura del tag HEAD: 

<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

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

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

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Scusami Mirko, erroneamente avevo messo questo di codice (iframe) e non funzionando ho chiesto anche li.

Le sto provando tutte :-)

Grazie

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

Resto in attesa del codice.... Grazie mille

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

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

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

con il codice diretto nella pagina non avrai nessun problema...wink

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

ho provato su Iphone e funziona bene.  :-)

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

ok, se vuoi mandami una mail che trovi nel mio profilo e procediamo a metterlo, altrimenti qui facciamo un Post kilometrico...wink

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Mandata Grazie! :-)

Leggi di più
Postato il da Luigi I.
Mirko Boschetti
Mirko Boschetti
Moderator

spedito tutto...

facci sapere il risultato....wink

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Il travaglio è lungo :-) ti ho riscritto Mirko

Leggi di più
Postato il da Luigi I.
Luigi I.
Luigi I.
User
Autore

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 

Leggi di più
Postato il da Luigi I.
Claudio D.
Claudio D.
Moderator
Utente del mese IT

...bene... , come avevo suggerito dal mio primo post, e per quello ti ho fatto postare il file PHP wink

...visto che hai risolto chiudi il post...

Leggi di più
Postato il da Claudio D.
Mirko Boschetti
Mirko Boschetti
Moderator

ma prima nelle prove, non appariva la barra di scroll, ora appare di nuovo, specie nei breackpoint bassi si nota.... cosa hai toccato adesso??? laughing

Leggi di più
Postato il da Mirko Boschetti
Luigi I.
Luigi I.
User
Autore

Ora funziona!!!!!  Grazie Mirko embarassed

Leggi di più
Postato il da Luigi I.