Jquery mobile bottom navbar

Question

I have an issue and really don't know how to solve this.. I have an sticky footer like this:

<!-- FOOTER ICON TABS -->           
          <div data-role="footer" data-position="fixed" data-tap-toggle="false">        
            <div class="footer" data-role="navbar">
              <ul>
                <li>
                  <a href="#dashboard" data-icon="dashboard" class="ui-btn-active" id="icon-dashboard">
                    <span class="navbar-text">Dashboard</span>
                  </a>
                </li>
                <li>
                  <a href="#" data-icon="progress" id="icon-progress">
                    <span class="navbar-text">Voortgang</span>
                  </a>
                </li>
                <li>
                  <a href="#map" data-icon="security" id="icon-security">
                    <span class="navbar-text">Plattegrond</span>
                  </a>
                </li>
                <li>
                  <a href="#" data-icon="security" id="icon-security">
                    <span class="navbar-text">Securitycheck</span>
                  </a>
                </li>
              </ul>   
            </div>
          </div>

Thereby I set this styling:

.ui-footer, .footer, .footer li, .footer a, .footer a:after {
    background-color: transparent !important;
    border-color: transparent !important;
    height: 70px;
}

But It is annoying because my content is behind the icons and it is not nice. It looks like this:

I allready have changed the heights of the white blocks, but the blocks are not having a hard height. This ecause the notification block is dynamic and the content vary from length. Thereby the second block has an collapsable block where Boardingpass is writen.

How it has to look:

Here is a FIDDLE which recreates the problem. I hope someone could help me out on this :)

Answer 1

You could just set the bottom margin:

#flight-info-block {
  margin-bottom: 80px !important;
}

also in code, use the third parametef of the slideToggle function to achieve the same effect at the end of the animation:

//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle("slow", "swing", function() {
    $("#flight-info-block").css("margin-bottom", "80px");
    $("#flight-info-block").trigger("updatelayout");
});

BTW: i also dislike the transparent background, then i added following rule at the bottom of your CSS:

.footer {
  background-color: #00a0e5 !important;
}

and removed also your -350 offset in scrollTop:

$('html, body').animate({
    scrollTop: $header.offset().top
}, 1000);

Your updated Fiddle: http://jsfiddle.net/yTt9b/1787/