CODEWITHSUNDEEP
ioscssjquery-mobilecordova
MeltingDog
MeltingDog

Reputation: 15488

JQuery Mobile: Extra space, black line appearing under data-role="content"?

I have a page with two lists on it. When I test on my iPhone 5, underneath the lists there is a load of extra blank space and a random blank line. (See image below)

I am not using the footer data-role="footer". Just data-role="content" and data-role="page". I have tried using the footer but it makes no difference.

When I test on a web browser all appears fine, so I cannot use the element inspector to find out whats wrong.

Would anyone know how to get rid of this? (ps I am running this on Cordova if that matters)

My HTML is:

   <div data-role="page" data-title="Conversation">

              <div data-role="header">
                  <a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
                  <h1>Conversation</h1>
              </div><!--HEADER-->

              <div data-role="content">
                  <ul data-role="listview">
                      <li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
                      <li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
                      <li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
                      <li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
                      </ul>
                      <div class="yeldivider"></div>
                  <ul data-role="listview">
                      <li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
                  </ul>

               </div><!--CONTENT-->

      </div><!--PAGE-->

There is no custom CSS other then the .yeldivider which appears between to two lists.

.yeldivider {
    background-color:#ffeb00;
    height: 40px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: -40px;
}

enter image description here

Upvotes: 0

Views: 1112

Answers (2)

yeyene
yeyene

Reputation: 7380

Working fine here DEMO http://jsfiddle.net/yeyene/SjbMd/ and already tested on iPhone.

I use these...

jquery.mobile-1.3.1.min.css

jquery-1.9.1.min.js Remove

jquery.mobile-1.3.1.min.js

what about yours?

CSS

.yeldivider {
    background-color:#ffeb00;
    height: 40px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: -40px;
}

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

This is a wild guess but sometimes content DIV has a problem with vertical stretching.

Worst case scenario, give it some id or class, like this:

<div data-role="content" class="cover-screen">
    //Content goes here
</div>

And use this CSS if you don't have a footer:

.cover-screen {
    position: absolute;
    top: 43px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

or this CSS if you have a footer:

.cover-screen {
    position: absolute;
    top: 43px !important;
    bottom: 43px !important;
    left: 0 !important;
    right: 0 !important;
}

And like I told you this is just a wild guess.

Upvotes: 1

Related Questions