3

Using Cordova (phonegap) & bootstrap to make a mobile application, testing on IOS for now.

Getting an issue with a header and footer bar that are fixed with scrollable content in the middle. When tapping to scroll, the header/footer bar moves down or up with the content but then snaps back to place as soon as the scrolling completes. If I use

-webkit-overflow-scrolling: touch;

it works as expected, but it makes it really awkward to scroll through the content, and if you scroll passed the end, it only scrolls the header or footer (with elastic overflow) until you stop for a second.

here's my html for the header/footer bars:

<div id="headerBar">
        <div class="container-fluid" style="background-color: #1569C7">
            <div class="row">
                <div class="col-xs-3 text-left">
                    <button id="logoutButton" type="button" class="btn btn-default">
                        Log Out
                    </button>
                    <button type="button" class="btn btn-default" id="restoreQuestionFeedButton">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                </div>
                <div class="col-xs-6 text-center" style="height: 55px">
                    <strong id="usernameText"></strong>
                </div>
                <div class="col-xs-3 text-right">
                    <button id="oldCreatQuestionButton" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
<div id="footerBar">
        <div class="container-fluid" style="padding: 0">
            <div class="row text-center">
                <button id="createQuestionButton" type="button" class="btn btn-default footerButton">
                    <span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong>
                </button>
            </div>
        </div>
    </div>

And here is the related CSS:

#headerBar {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1569C7;
}

#footerBar {
    position: fixed;
    z-index: 100; 
    bottom: 0; 
    left: 0;
    width: 100%;
    background-color: #1569C7 !important;
}
3
  • Fixed it, initially by using the iscroll plugin. But, that had other annoying issues with cordova, so I ended up figuring out how to natively do it in CSS by setting absolute positions for the header, footer, and content and setting overflow to hidden. If you're having the same issue and found this, send me a message and I'll try to help out.
    – Samu Singh
    Jun 2, 2014 at 1:14
  • 1
    Hello @Samu, Can u please post the solution here. Thansk
    – AnR
    Mar 12, 2016 at 15:40
  • 1
    Please some kind of solution . Thanks
    – Hassan ALi
    Nov 10, 2016 at 11:08

1 Answer 1

0

In my case, I fixed this bug by removing "top: 0" after "position: fixed"

And it's fix!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.