发表新帖
发表新帖

Div element won't stay at the bottom when ios 7 virtual keyboard is present

后端 未结
关注
7 1549
梦毁少年i
梦毁少年i 2020-12-02 05:31

I\'m having a problem with a div element to stick to the bottom of my web app when ios 7 virtual keyboard appears after pressing a textbox.

I\'ve this div element:

相关标签:
7条回答
  • 挽巷
    2020-12-02 06:01

    Approved answer works, but can mess with some CSS, so I have to use something else. It's not my fix, but found it on the internet and it worked for me:

    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();
        }
    }
}
    0 讨论(0)
  • 耶瑟儿～
    2020-12-02 06:05

    In my case I used to capture the event when entering into input text fields events and hiding the bottom bar using

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

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

    and capture the event when the keyboard is closed and show back the keyboard using

    document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});
    0 讨论(0)
  • 离开以前
    2020-12-02 06:13

    EDIT: Okay, I found another possible solution. Check your html meta tags for something like this: 

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

    Replace it with this:

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

    This fixed the problem for me. I should note that my app is using Cordova though.

    Another possible solution:

    If you look in config.xml (probably under the resources directory, you should see a line that says:

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

    If you set that to true, it keeps footers from moving above the soft keyboard. However, this also causes the keyboard to sometimes cover up the text field that the user is typing in.

    0 讨论(0)
  • 小鲜肉
    2020-12-02 06:14

    I'm a bit late but this works well:

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

    This assumes a fixed or absolutely positioned element that has bottom: some number originally. Add this to wherever it is appropriate in your javascript scripts (probably on a function that is called when the page loads). This uses jQuery but it easily translates into javascript. This basically forces the footer to stay on the bottom related by the 'top' value instead of the ;bottom' value.

    0 讨论(0)
  • 执念已碎
    2020-12-02 06:16

    There's the culprit in your #footer class bottom:0px; If you give bottom to any element, on appearance of virtual keyboard, those elements move upwards in iOS 7. The workaround is to use top property.

    0 讨论(0)
  • 刺人心
    2020-12-02 06:16

    Main issue in you CSS class property

    footer{}

    You have set the position "fixed" and z-index.

    Please handler position property according to to Iphone.

    0 讨论(0)
 看不清?
提交回复
热议问题