iframe-Wrapper non si adatta al mobile

[p3pp3s]

Salve Forum,
in genere trovo sempre risposta ai miei quesiti sul forum, e cerco di non aprire nuove discussioni.

Ma questa volta ho davvero bisogno di voi. Per un portale che sto sviluppando avrei la necessità di "embeddare" un servizio esterno, Map2App che da un codice per l'inserimento su siti esterni (iframe) o un url da usare come wrapper.

L'url in questione è http://web.map2app.com/yoga-for-travelers/en/ una mappa di prova disponibile sul sito in fase demo.
Il codice è praticamente la stessa cosa: una iframe che punta al link.

La questione che non riesco a risolvere è questa:
Se provo ad aggiungere una nuova voce di menu in joomla! 3 selezionando wrapper che punta alla mappa di esempio (ma anche inserendo il codice dell'iframe in un articolo joomla), via desktop funziona alla grande. Se provo invece a visitare il mio sito da mobile, otterrò un iframe/wrapper con la giusta larghezza ma un'altezza fissa che mi impedisce di navigare la mappa.

La cosa è alquanto strana dato che se visito direttamente il link della mappa da mobile (quindi senza passare per il mio joomla) il sito è responsive alla grande e non ho alcun problema.

Provo a lasciarvi due screenshot.

Map via desktop:

Map Via Mobile:



Il sito in questione è quello su cui sono hostate le immagini, sezione Prova-Map

Grazie a tutti anticipatamente.
G.

[maxzilla]

c'e' un "display: none;"
alla riga 183 del css

praticamente impostato in questa maniera
in versione desktop l'altezza sta al 65%
nella versione mobile invece elimina il contenuto

[p3pp3s]

Grazie maxzilla,


ma a quale file css ti riferisci? alla riga indicata non trovo nulla.


 a quale riga ti riferisci? potresti copia/Incollarmi la stringa?

[maxzilla]

http://web.map2app.com/yoga-for-travelers/assets/mobile-client/css/theme-static-5.css


#list-page #gmapcontainer, #itemlist #gmapcontainer, #content-page #gmapcontainer {    display: none;}

[p3pp3s]

ah...ma quindi non è una questione del mio template, dipende dal servizio Map2App?

[maxzilla]

Non mi e' ben chiaro cosa gestisci tu e cosa loro...ma tu non puoi mettere mano al css che ti ho indicato?

[p3pp3s]

Io gestisco il sito irpintour Joomla Based.
Loro gestiscono la webapp Map2App.


non posso modificare i loro source.
Io pensavo fosse un problema del mio css, per quanto riguarda l'iframe o  la funziona wrapper.

[maxzilla]

quindi hai segnalato un sito chiedendo  una cosa che non gestisci, che non e' basata su joomla e quindi  che non c'entra niente con questo forum

[p3pp3s]

No maxzilla, perchè?


La mia domanda è relativa all'iframe/wrapper di Joomla. Il sito è basato su joomla. La domanda è e resta comunque: perchè quando visito da mobile il wrapper che punta ad una webapp l'iframe di joomla si adatta soli in larghezza e non in altezza? Non è un problema dell'applicazione linkata, ma di un iframe joomla.


Pensavo fosse un problema di joomla..


Mi sbaglio?

[maxzilla]

ok ok
ma allora resta il dubbio del perche' abbiano impostato la visualizzazione senza mappa (display:none) per le versioni mobili.
Forse chiedono un supplemento come fanno altri per il rilascio della versione responsive?
Hai provato a contattarli prima di andare avanti con il tuo iframe?

[p3pp3s]

Non li ho contattati essenzialmente perche se visito il loro sito (link alla mappa) da mobile mi si vede correttamente. Perciò l'impressione era quello di avere un problema su joomla iframe/wrapper..

Cosa ne pensi?

[maxzilla]

ho visto ora su smartphone
la mappa di default e' disabilitata, la richiami solo dal bottone centrale rosso "map"
se non vedi il bottone devi per formza aumentare l'altezza riservata all'iframe

[p3pp3s]

mhm...forse non mi sono spiegato affatto bene


Schematizzando:


1)se visito il sito da desktop (il mio sito joomla nel quale è presente un wrapper che punta all'applicazione chiamata MAP di un produttore esterno) tutto funziona perfettamente;


2) se visito il mio sito, via mobile, la stessa sezione dedicata alla Map (solito wrapper che punta al solito link), l'iframe che contiene l'applicazione Map è corretto in larghezza, ma l'altezza non mi consente di consultare l'applicazione. E' un problema di altezza iframe (wrapper).


3) se visito da mobile direttamente l'applicazione MAP del produttore esterno (quindi senza passare dal mio sito e quindi da wrapper/iframe) l'app funziona correttamente, si adatta benissimo al mobile.


Per la terza ragione, ho scartato l'idea che l'applicazione che vorrei embeddare non sia responsive (dato che se mi collego a http://web.map2app.com/yoga-for-travelers/en/ da mobile, questa si adatta al mio display).


Il problema sta nel wrapper che ho associato al menu Joomla! "MAPPA" e che punta a [/size]http://web.map2app.com/yoga-for-travelers/en/[/color]
Da desktop funziona perfettamente. Da mobile non la visualizzo bene, ha problemi in altezza.


Scusa se sono ancora poco chiaro, ma non so come spiegarmi

[maxzilla]

si ok chiarissimo,
allora sto vedendo anche io come adattare un'altezza wrapper alle diverse risoluzioni..ti faccio sapere,
se hai urgenza spero che qualcun'altro ti possa aiutare prima

[p3pp3s]

Ho momentaneamente tamponato la cosa annullando dal mio file template.responsive.css le stringhe relative agli iframe e al wrapper. Non so se può essere una soluzione. Per adesso sembra funzionare.

Se qualcuno ha altre soluzioni, ben venga