Bootstrap modal makes scrollbar disappear after closing

Question

I read a lot of solutions / hacks on this topic on StackOverflow but none of them seem to work for me.

I am using a modal for logging in in Meteor (eg. using Facebook login service). And a callback is triggered when the login is successful.

I put this in my callback to close the modal - $('#modalSignIn').modal('toggle');

Everything works fine except that after close, there is no scrollbar on the page.

One solution I got was from here -

.modal-open {
    overflow: scroll;
}

This works partially because I have the scrollbar even when the modal closes. However, there seems to be about 15px padding on the right (where the previous scrollbar should be.) On repeating this opening and closing, the padding keeps adding up.

EDIT:

Here 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>

Ubangishari

Do you have a fiddle or plunkr we can look at? – Haleigh

Nope, but let me try to make one. I am not sure if I will be able to replicate it though because this happens on Meteor successful login callback. – Ubangishari

I read somewhere that Modal on opening adds some classes to the body. Is it possible that while toggling, it does not remove these from the body? I even tried 'hide' instead of 'toggle' but the same result. – Ubangishari

Answer 1

I had the same problem. Bootstrap add modal-open class in the body, but does not remove when the modal is closed. I solved just adding in callback:

$('body').removeClass('modal-open');

Bullfight

OMG!, In my case the modal-open class is on the html tag :(. So, my code $('html').removeClass('modal-open'); – Prosecution

Answer 2

you can try this fix

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

Brightman

Thanks but that did not work. However, I think while figuring this out, I realized I had the modals were in an {{ #if }} statement which was causing them to be removed once the user is logged in. – Ubangishari

Answer 3

Inspect your body and html tags, you'll find one of them gained a style of overflow:hidden.

Just add the style to your css file:

body {
  overflow: auto !important;
}

or

html {
  overflow: auto !important;
}

I noticed that it adds also a padding-right style, so you might want to remove that as well.

Sisson

Answer 4

Add this to your body tag style="overflow:auto;"

Indiscrimination

Answer 5

 $('body').removeClass("modal-open");

// Bootstrap add modal-open class in the body, but it does not remove when the modal is closed.

Unpolitic

Answer 6

Solve the scroll bar issue by adding the following to your body CSS rules.

I had this same issue and after reading all the answers above they did not solve my issue so I decide to think and I arrive at the fact that forcing the CSS rule will ensure the desired result.

body { padding-right: 0!important }

Doriandoric

Answer 7

this did it for me:

$("body").css("overflow", "auto");

Paulina

Answer 8

I found the problem and wanted to post it if anyone makes the same mistake - I had the modals in an {{#if }} statement which was causing them to be removed once the user logs in. I just took the modals out of the if and it works fine now -

<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="#">HOW IT WORKS</a></li>
        <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>
    {{/if}}

    <!-- 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>

</template>

Ubangishari