web-dev-qa-db-fra.com

L'élément Div ne reste pas en bas en présence d'un clavier virtuel ios 7

J'ai un problème avec un élément div pour coller au bas de mon application Web lorsque le clavier virtuel ios 7 apparaît après avoir appuyé sur une zone de texte.

J'ai cet élément div:

....
        <div id="footer" style="text-align:center">
            <div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
        </div>

    </form>
</body>

Il utilise ce style

#footer{
color:#CCC;
height: 48px;

position:fixed;
z-index:5;
bottom:0px;
width:100%;
padding-left:2px;
padding-right:2px;
padding:0;

border-top:1px solid #444;

background:#222; /* Old browsers */
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));  
background:    -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */    
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background:      -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background:     -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background:         linear-gradient(top, #999, #666 2%, #222); /* W3C */
}

Et lorsque j'appuie sur la zone de texte, l'élément de pied de page saute au-dessus du clavier virtuel ... Il fonctionnait jadis lorsque iDevices était exécuté sur des versions antérieures à iOS 7.

Sur le côté gauche est avant d'appuyer sur la zone de texte et sur le côté droit est après avoir appuyé sur la zone de texte.

Left side: Before. Right side: After

Le pied de page saute au-dessus du clavier virtuel.

METTRE À JOUR:

J'ai changé la méta-balise fournie par Opossum et le pied de page reste en bas:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black" />

Extension

Ce n'est pas une partie de la question, mais le correctif visse les choses lorsque vous utilisez un Android:) Une solution pour cela?

Solution: suppression de l'échelle maximale et de la densité cible Dpi; elle fonctionne désormais à la fois pour IOS et Android. La méta-tag ressemble maintenant à ceci:

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
htmlasp.netcssios7
36
Phu Minh Pham

EDIT: D'accord, j'ai trouvé une autre solution possible. Vérifiez vos balises méta HTML pour quelque chose comme ça: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

Remplacez-le par ceci:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Cela a résolu le problème pour moi. Je dois noter que mon application utilise Cordova cependant.

Une autre solution possible :

Si vous regardez dans config.xml (probablement sous le répertoire resources, vous devriez voir une ligne qui dit:

<preference name="KeyboardShrinksView" value="false" />

Si vous définissez ce paramètre sur true, les pieds de page ne pourront pas se déplacer au-dessus du clavier virtuel. Toutefois, cela entraîne parfois le clavier pour masquer le champ de texte saisi par l'utilisateur.

39
Opossum

Il y a le coupable dans votre classe #footerbottom:0px; Si vous attribuez bottom à un élément, lors de l'apparition du clavier virtuel, ces éléments se déplacent vers le haut dans iOS 7 . La solution consiste à utiliser la propriété top.

5
Tanveer Shaikh

Je suis un peu en retard mais ça marche bien:

var footer = $(".footer");
footer.css({ "top": footer.position().top, "bottom": "auto"});

Ceci suppose un élément fixe ou absolument positionné qui a en bas: un certain nombre à l’origine. Ajoutez ceci à l'endroit approprié dans vos scripts javascript (probablement sur une fonction appelée lors du chargement de la page). Cela utilise jQuery mais cela se traduit facilement par javascript. Cela oblige fondamentalement le pied de page à rester sur le bas, par rapport à la valeur 'top' au lieu de la valeur 'bottom'.

3
user3718546

La réponse approuvée fonctionne, mais peut déranger certaines CSS, je dois donc utiliser autre chose. Ce n'est pas mon problème, mais je l'ai trouvé sur le internet et cela a fonctionné pour moi:

HTML:

<body onResize="onResize();">

JavaScript:

function onResize(){
    var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7);
    if (ios7){
        var height = $('body').height();
        if (height < 350){ // adjust this height value conforms to your layout
            $('.myBottomMenu').hide();
        }
        else {
            $('.myBottomMenu').show();
        }
    }
}
3
Jaroslav

Voici comment nous l'avons résolu: Cordova 2.9.0 . Solution 1. L'ajout de la balise méta de la fenêtre d'affichage a résolu dans une certaine mesure, mais pas complètement.

$(document).on('focus','input, select, textarea',function() {
        if(OSName=== 'iOS' && ver[0] === 7){
                if($(this).attr('readonly')===undefined){
                        $('#footer').hide()
                }
         }
});
$(document).on('blur','input, select, textarea',function(){
             if(OSName=== 'iOS' && ver[0] === 7){
                   if($(this).attr('readonly')===undefined){
                   $('#footer').show();
                   }
              }
});

où #footer est l'identifiant de la div qui tient le pied de page . Cela affichera la barre d'outils pendant un instant et le masquera, pour éviter ce scintillement, nous avons ajouté du code en natif,. Inscrivez-vous à l'événement keyboardshow dans votre MainViewcontroller.m Ajoutez ce qui suit dans la fonction init:

//fix for ios7 footer is scrolled up when the keyboard popsup.
        [[NSNotificationCenter defaultCenter] addObserver:self
                                                 selector:@selector(keyboardWillShow:)
                                                     name:UIKeyboardWillShowNotification
                                                   object:nil];

2.ajouter la fonction suivante

-(void)keyboardWillShow:(NSNotification*)notification{
    //call the javascript to hide the footer.
    //fix for ios7 footer is scrolled along wiht the content when the keyboard comesup.
    if (IsAtLeastiOSVersion(@"7.0")){
        [self.webView stringByEvaluatingJavaScriptFromString:@"()"];
    }
}

3.Dans le fichier js, ajoutez la fonction

//Fix for footer is misalligned when the virtual keyboard pops up ios7
//check for device is iPhone and os version is 7
function hideFooter(){
    if(OSName=== 'iOS' && ver[0] === 7){
        if($(this).attr('readonly')===undefined)
            $('#footer').hide();
    }
}

Faites-nous savoir si cette solution fonctionne pour u.

1
user3414060

Dans mon cas, j'ai utilisé pour capturer l'événement lors de la saisie dans les champs de texte de saisie des événements et en masquant la barre inférieure

if($(event.target).hasClass("inputtextfield")){

        $('.bottom_bar').hide();}

et capturer l'événement lorsque le clavier est fermé et afficher le clavier en utilisant

document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});
0
kavinhuh