CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Howard Hee
Howard Hee

Reputation: 929

Remove vertical scrollbar in jquery-mobile

I am newbie in jquery-mobile. When loading div "display:none;", the page is fine. But after loading div "display:block;", a vertical scroll bar was appear.

I tried change the css height to 80%,is working. But what I want is 100%.

How do I remove the vertical scroll bar. Thanks

Below is my jsfiddle:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
#uploadloading {
    position: absolute;
    z-index: 1;
    background: url(http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif) 50% 50% no-repeat rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
}
<div data-role="page" id="samplepg">
<div data-role="header" data-position="fixed" data-theme="a" role="banner" class="ui-header ui-bar-a ui-header-fixed slidedown ui-fixed-hidden"><h1 class="strokeme ui-title" role="heading" aria-level="1">Header</h1>
</div>

<div data-role="main" class="ui-content" id="samplemain"><div id="uploadloading" style="display:block;"></div>
<div id="samplebody">
    <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
     <li>sdf</li>
</div>
<div data-role="footer" data-id="foo1" style="text-align:center;" data-position="fixed" data-tap-toggle="false"><div class="bfooter"><div style="height:56px;">Footer</div>
</div>
</div>
</div>

Upvotes: 3

Views: 996

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

Just give 

 #uploadloading {
     top: 0;
  }


#uploadloading {
  position: absolute;
  z-index: 1;
  background: url(http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif) 50% 50% no-repeat rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
}
<div data-role="page" id="samplepg">
  <div data-role="header" data-position="fixed" data-theme="a" role="banner" class="ui-header ui-bar-a ui-header-fixed slidedown ui-fixed-hidden">
    <h1 class="strokeme ui-title" role="heading" aria-level="1">Header</h1>
  </div>

  <div data-role="main" class="ui-content" id="samplemain">
    <div id="uploadloading" style="display:block;"></div>
    <div id="samplebody">
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
      <li>sdf</li>
    </div>
    <div data-role="footer" data-id="foo1" style="text-align:center;" data-position="fixed" data-tap-toggle="false">
      <div class="bfooter">
        <div style="height:56px;">Footer</div>
      </div>
    </div>
  </div>

Upvotes: 1

Related Questions