Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbox is positioned behind the navbar, clicking on the navbar triggers the keypad to open for the textbox on mobile devices.
I need assistance in suppressing events of any control that gets hidden behind the navbar after scrolling. Can someone please help me with this?
Here is a snippet of the code:
<snap-drawers>
<div snap-drawer="right">
<!-- some content -->
</div>
</snap-drawers>
<snap-content>
<div id="main-mobile-frame">
<div class="app">
<nav class="navbar navbar-default navbar-fixed-top my-top-bar" role="navigation">
<span class="head-title"><a href="#/home">Welcome</a></span>
<div class="bg-reg-shadow btn-group pull-left top-menu-buttons">
<div class="btn btn-navbar sidebar-toggle" id="menu_bars_id" snap-toggle>
<i class="glyphicon glyphicon-align-justify"></i>
</div>
</div>
<div class="bg-reg-shadow btn-group pull-right top-menu-buttons" yield-to="navbarAction">
<div snap-toggle="right" class="btn btn-navbar" id="right_plus_id">
<i class="glyphicon glyphicon-plus"></i>
</div>
</div>
</nav>
<div class="app-body scrollable">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
</div>
<ng-view></ng-view>
</div>
</snap-content>