Tastiera Mostra posizione elementi incasinati

Question

Ho un gioco che richiede l'input della tastiera tattile del cellulare. Il suo display ha problemi, ogni volta che la tastiera si presenta al centro di input del testo, tutto il mio elemento in quale posizione: l'assoluto è tutto incasinato.

Esiste un plug-in che consente di visualizzare sempre la tastiera mobile in modo da riposizionare tutti gli elementi O devo modificare il css per creare gli elementi in modo che non si rovinino quando viene visualizzata la tastiera?

Come devo implementarlo?

Questo è uno degli elementi css:

#mixer{ 
    position: absolute; 
    bottom:29%; 
    left:25%; 
    width: 234px; 
    height: 210px; 
    background: transparent url(img/mixer.png) 0 50px no-repeat; 
} 

Nota: io sto usando jQuery Mobile, PhoneGap sull'ambiente Android.

Answer 1

Nella tua AndroidManifest.xml, aggiungere la seguente riga sotto l'attività con la tastiera:

android:windowSoftInputMode="adjustNothing"

Answer 2

Penso che il tuo problema sia con l'attributo Bottom impostato su "in questo caso" 29%. potresti volerlo impostare come assoluto con TOP anziché bottom.

In questo modo spingerà dall'alto invece di guardare in basso, in questo caso la tastiera.

quindi lo vuoi al 29% del fondo, 100 - 29 = 71 Rimuovi il 29% in basso e sostituiscilo al 71% superiore.

Answer 3

Ascolta per lo spettacolo/nascondi eventi di tasti di scelta rapida. Questa risposta su SO ha un esempio di codice:

Softkeyboard event Listener in Android

Quando il SoftKeyboard è in stato mostrato, utilizzare un CSS separata 'keyboard-è-indicato' per il vostro gioco. Quando la Softkeyboard è nascosta, ripristina il precedente CSS 'keyboard-is-closed'.

Questo precedente Q & A sul SO affronta una situazione simile:

phonegap application layout issue with soft keyboard in Android 2.3.6 and in iPhone 5.0

Answer 4

Mi sono imbattuto in questo su un'app per iPad piuttosto che su Android, ma sembra lo stesso problema.

jQuery mobile imposta l'altezza della pagina con javascript quando le dimensioni cambiano - qualsiasi cosa allineata alla parte inferiore della pagina viene spostata verso l'alto nell'html, contemporaneamente al sistema operativo scorre l'intera vista verso l'alto per mantenere la posizione precedente dell'input visibile.

Ho risolto il problema con alcuni css che fanno ignorare il browser l'altezza impostata. Rende anche le modifiche di orientamento molto più agevoli.

.ui-mobile, .ui-mobile .ui-page { 
    min-height: 100% !important; 
    } 

Answer 5

dai un'occhiata a queste Collegamenti-

http://android-developers.blogspot.in/2009/04/updating-applications-for-on-screen.html

http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode

Prova ad aggiungere in Android manifest: windowSoftInputMode = parametro "adjustResize" per il tag attività.

Spero che aiuti.