1

There is page shift when opening and closing the uib-modal. Check https://angular-ui.github.io/bootstrap/#/modal . Notice the scrollbar disappearance and appearance.

This question is already asked here (Opening AngularJS modal causes page to shift if scrollbar exists) but doesn't has a working soultion. The only solution given was to set overflow-y to body which creates vertical scrolling even if the scrolling is not needed.

body{
overflow-y: scroll !important;
}

Also visited the following links but couldn't implement it for uib-modal. Is there any fix to solve this issue? Thanks in advance.

  1. https://github.com/twbs/bootstrap/issues/9855
  2. https://github.com/angular-ui/bootstrap/issues/3714
Community
  • 1
  • 1
Sateesh Kumar Alli
  • 288
  • 4
  • 17

1 Answers1

0

Shifting may be coming because when modal opens it add some padding to body. Due to some bugs I don't know exactly this padding remains with the body even when modal is closed and because of that page shifts.

When modal is being closed on button click you can try - 

    $("#ModalId").modal('hide');
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open');
    $('body').css('padding-right', '');

It worked in my case.

WitVault
  • 23,445
  • 19
  • 103
  • 133
  • May be this will help -> http://stackoverflow.com/questions/20460369/adding-and-removing-classes-in-angularjs-using-ng-click – WitVault Nov 10 '16 at 12:05