Dojo app header and footer are not fixed positioned in Windows and iPhone

Question

We are developing hybrid app using IBM MobileFirst 7.0 and dojox 1.8 as scripting language.

i am facing problem with UI Header and Footer which are not fixed in windows and iphone but the same code is working fine with Android.

i.e, For heading, we used tag and gave data-dojo-props:"fixed:top" for heading.
For footer, we used tag and gave data-dojo-props:"fixed:bottom" for footer.

please can any suggest for solution?

<div data-dojo-type="dojox.mobile.ScrollableView" id="Login_en_View_Id"
    data-dojo-props="selected:false">

    <h1 class="test" data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed:'top'"></h1>

    <div class="margin">

        <label >Text:</label> <input class="clearFields"
            data-dojo-type="dojox.mobile.TextBox" >

        <label>Code</label> <input class="clearFields"
            data-dojo-type="dojox.mobile.TextBox">


        <button data-dojo-type="dojox.mobile.Button" class="englishFont">Login</button> 

        <button data-dojo-type="dojox.mobile.Button" class="englishFont">REGISTER</button>


    </div>

    <h2  class="test1" data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed:'bottom'"></h2>
</div>

Css code:

    .test{  
        height: 42px;
        display: table;
        line-height: 0px;
    }
   .test1{
        height: 44px;
   }

This is a programming website. Provide your implementation so that it could be recreated and debugged. Also confirm if you are referring to Windows 8 or Windows Phone 8. — Idan Adar, Oct 09 '15 at 07:54

score 0 · Answer 1 · edited May 23 '17 at 12:07

I am not sure about what do you mean by "not fixed positioned".
I've used your code and both the header and the footer are indeed fixed positioned to the top and bottom.

What I think you may be referring to is that you are able to scroll the page and the header/footer is moving with you (note, though, that it is still fixed at the "top/bottom").

To "fix" this you can put the following at the beginning of the wlCommonInit() function:

document.ontouchmove = function(event){
    event.preventDefault();
}

That is very rudimentary, but works. There will be no more scrolling.
You can find additional solutions here: iPhone Web App - Stop body scrolling

Dojo app header and footer are not fixed positioned in Windows and iPhone

1 Answers1