It is currently 3 August 2020, 11:53 Advanced search

Ionic tabs il contenuto non scrolla

Domande e risposte su come utilizzare Instant Developer Cloud al meglio

Ionic tabs il contenuto non scrolla

Postby d.termini » 7 July 2020, 14:08

Inde Cloud 20.0.2
Tema Ionic v2

Su una vista ho pensato di riorganizzare il contenuto in 3 tabs perché ci sono tanti campi da mostrare e per praticità di utilizzo.
Solo che adesso aggiungendo altri campi ho notato che il contenuto non scrolla e quindi non vedo i campi più in basso.

Ho quindi provato a rimpicciolire la finestra del browser e si manifesta il problema su tutte le tab.

C'è un modo particolare di creare una vista paginata a tab? Gli esempi usano un layout diverso usando diverse pagine inglobate all'interno delle tab, nel mio caso la pagina è unica.
Ho già provato ad inserire uno scrollContainer come elemento base all'interno della tab ma non cambia.

Ho letto di un bug sullo scroll del contenuto delle tab corretto in Ionic V4, non vorrei che fosse lo stesso problema.
d.termini
 
Posts: 813
Joined: 13 November 2017, 8:41

Re: Ionic tabs il contenuto non scrolla

Postby v.marino » 7 July 2020, 15:27

Ciao,

potresti farmi vedere com'è la struttura della videata? Va bene anche uno screenshot dell'albero, è per capire meglio com'è stata costruita.
User avatar
v.marino
Pro Gamma
Pro Gamma
 
Posts: 613
Joined: 2 January 2013, 8:11

Re: Ionic tabs il contenuto non scrolla

Postby d.termini » 8 July 2020, 7:23

Ciao Vittoria,
ecco la struttura, fortunatamente questa è l'unica videata fatta così e non dovrebbe essere un grosso problema rivederne la struttura, ma se riesco a farla funzionare correttamente è meglio.
albero_vid_operatori.PNG
albero_vid_operatori.PNG (11.1 KiB) Viewed 141 times
d.termini
 
Posts: 813
Joined: 13 November 2017, 8:41

Re: Ionic tabs il contenuto non scrolla

Postby v.marino » 8 July 2020, 8:50

Di solito la struttura è al contrario, cioè l'elemento IonTabs è figlio diretto della videata e ogni elemento IonTab contiene un IonStdPage.
In questo modo è l'elemento IonStdPage che si occupa, tra le altre cose, anche dello scroll. In particolare nel dom viene aggiunto un elemento con tag scroll-content che viene usato per rendere scrollabile il contenuto.

Se vuoi tenere la struttura così com'è puoi provare ad aggiungere un container come elemento base all'interno di ogni tab e poi impostargli lo stesso css dell'elemento scroll-content oppure assegnare alla sua proprietà tag il valore "scroll-content" per renderlo un elemento con tag <scroll-content> come quello dell'IonStdPage.
User avatar
v.marino
Pro Gamma
Pro Gamma
 
Posts: 613
Joined: 2 January 2013, 8:11

Re: Ionic tabs il contenuto non scrolla

Postby d.termini » 8 July 2020, 9:07

Grazie Vittoria,
con il container e tag "scroll-content" funziona lo scroll, strano che non funzionasse con l'elemento scroll content, però le tab coprono l'ultimo campo, in caso per questo posso fare un workaround.
d.termini
 
Posts: 813
Joined: 13 November 2017, 8:41


Return to Tips & Tricks - Cloud

Who is online

Users browsing this forum: No registered users and 2 guests