Despite trying numerous solutions and hacks on this issue from StackOverflow, none of them seem to work for me.
Currently, I am utilizing a modal for the login process in Meteor (e.g. using Facebook login service) which triggers a callback upon successful login.
In my callback function, I have included the following line to close the modal:
$('#modalSignIn').modal('toggle');While everything seems to be functioning correctly, one problem persists - after closing the modal, the page lacks a scrollbar.
One potential remedy suggested was found here -
.modal-open {
overflow: scroll;
}
This solution works partially as it maintains the scrollbar even when the modal is closed. However, there appears to be approximately 15px padding on the right side (where the previous scrollbar should be). Upon repeated opening and closing of the modal, this padding continues to accumulate.
EDIT:
Below is my Nav template -
<template name="_navMenu">
{{#if isLoggedIn}}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My Profile <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My Profile</a></li>
<li><a href="#">Edit Profile</a></li>
<li class="divider"></li>
<li><a href="#" id="logout-button">Logout</a></li>
</ul>
</li>
{{else}}
<li><a href="#" data-toggle="modal" data-target="#modalSignUp">SIGN UP</a></li>
<li><a href="#" data-toggle="modal" data-target="#modalSignIn">LOG IN</a></li>
<li><button class="btn btn-primary nav-button visible-xs-inline-block">Text Here</button></li>
<!-- Modal -->
<div class="modal fade" style="overflow-y: scroll;" id="modalSignIn" tabindex="-1" role="dialog" aria-labelledby="SignInLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
{{> atFormModal state="signIn"}}
</div>
</div>
</div>
</div>
</div>
{{/if}}
</template>