CODEWITHSUNDEEP
jquery-mobilefooter
temporary_user_name
temporary_user_name

Reputation: 37058

jQuery Mobile footer floating in middle of screen?

Anytime I put in a simple footer bar, instead of docking at the bottom of the screen, it floats in the middle, halfway up the screen. My code is as simple as is permitted:

    <body id="mainBody" onload="initialize()">      

      <div id="mainPage" data-role="page" data-theme="e">
        <div data-role="header">
             <!-- <img src="headerlogo.png" />-->
              <br />
              <p style="text-align:center">To begin searching for samples, select one of the search methods from the following table.</p>
        </div>

      <div data-role="content">
          <a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
          <a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
          <a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
      </div>

      <div data-role="footer">
          <h1>Hey guys!</h1>
      </div>

    </div>


  </body>

This results in a nice header and three nice button links, followed immediately by a footer in the middle of the screen! Why would it appear there instead of attaching to the bottom of the viewport?

Upvotes: 1

Views: 3353

Answers (3)

SASM
SASM

Reputation: 1312

As of JQM 1.3, you can use the data-position="fixed" in the footer div to achieve this:

<div data-role="footer" class="ui-bar" data-position="fixed">
            <h4>I am a fixed footer!!</h4>
</div>

However, the footer seems to be floating on top of the content (like full screen background image) rather than being applied at the bottom of the image.

Upvotes: 1

Phill Pafford
Phill Pafford

Reputation: 85318

While @stay_hungry has a solution as well the problem is the content

<div data-role="content">
    <a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
    <a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
    <a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>

The footer is applied after the content and is not fixed to a position by default, so if your content does not fill the screen your footer will appear in what looks like the middle of the screen.

Example:

Now add some content to push the footer down the page:

And more content:

Using the Fixed Position:

Or Persistent option:

is also an option that might work for you

Upvotes: 0

stay_hungry
stay_hungry

Reputation: 1448

try this one

 <div data-role="footer" data-position="fixed">
      <h1>Hey guys!</h1>
  </div>

Upvotes: 2

Related Questions