ionButto Fab visualizzato male

[mromini]

Ciao, ho una videata con un ionTabs con 3 ionTab che contengono 3 videate. In una di queste ho in ionButton di tipo Fab in basso. Il risultato che ottengo è questo:

Cattura.PNG (5.59 KiB) Viewed 5539 times

Il problema dipende dal valore della proprietà bottom della classe [fab-bottom] che è 16px. Ho già visto che nell'evento load della videata che contiene il Fab posso impostare un valore diverso allo style del bottone per posizionarlo più in alto. Il problema però è che l'altezza dell'ion-tabbar è diversa a seconda che l'app giri su iOS o Android.

C'è modo di conoscere questa altezza a runtime?

Ciao, Mario.

[g.lanzi]

Anch'io ho usato i fab nella mia app, anche assiene alle tabs. Credo che il problema dipenda da dove hai messo il footer. Se vuoi che il footer sia all'interno della tab, devo metterlo nel content contenuto nel tab stasso (anche perché potrebbe essere diverso da tab a tab).

Per quanto riguarda l'altezza a run-time, c'è la funzione getBoundingRect che torna un oggetto con width, height, left e top.

[sarcaz]

io ho anche notato che a livello di ordine il footer deve essere prima del content nell'albero

[mromini]

Alla fine ho risolto creando 2 classi CSS ed associando la classe .fab-pers al bottone.

Code: Select all

.platform-ios .fab-pers {
  bottom: 66px;
}

.platform-android .fab-pers {
  bottom: 87px;
}


Per quanto riguarda l'altezza a run-time, c'è la funzione getBoundingRect che torna un oggetto con width, height, left e top.

Ho fatto qualche prova con la getBoundingClientRect() ma richiamata sia sull'ionTabs che sull'ionTab ritorna sempre un oggetto con tulle le proprietà a zero.

Ciao,
Mario.