5

I am using the latest versions of angularjs, angularui, jquery and bootstrap and have come across an issue. The body content shifts left and then right when an angularui modal is used. This can be seen at the angularui homepage for example.

I have read through this issue (https://github.com/twbs/bootstrap/issues/9855) and have tried to extend this solution (http://jsbin.com/oHiPIJi/8/edit) to the angularui modal case but it doesn't seem to work. My knowledge of jquery is pretty limited / minimal I'm afraid but I suspect that the bs.modal events are not triggered for angularui though I'm not sure.

Any pointers on the right direction to solve this issue would be much appreciated! Thanks.

Andrew
  • 880
  • 2
  • 10
  • 19

1 Answers1

9

The following may be of help:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style>
  .modal-open {
  overflow: auto;
}
</style>

Overwrite class modal-open overflow to auto after the bootstrap css is loaded. Here is a plunker for you to check if this is the desired result: http://plnkr.co/edit/Jz6Pd08v7dkkdRUKg8FK?p=preview

You need to open the preview in a new window (Blue X on the top right). Resize the window to different widths to see if it works with scrollbar present or not. Tested this on Firefox. other browsers may have different results.

mainguy
  • 8,283
  • 2
  • 31
  • 40
  • Thank you very much for your answer mainguy. Unfortunately it doesn't solve the issue for me. I have forked the plunker to demonstrate (http://plnkr.co/edit/wZ7BSIIKBy850fR4Vxs0?p=preview). It solves the content shifting issue but introduces scrolling of the background (once you scroll to the bottom of the modal). That is what I have found as I tried to work through this - you can either get rid of the content shifting with CSS such as the above but have a scrolling background or stop the background from scrolling and have content shifting. Sure you can solve both - probably with JS. – Andrew Jan 28 '14 at 00:05
  • 1
    What's so bad about a scrollable background? Maybe you should give ng-dialog a a try. I use it very often and it's a lot smaller and easier to handle than bootstrap modal. Works perfectly with bootstrap 3. https://github.com/likeastore/ngDialog – mainguy Jan 28 '14 at 19:01
  • 1
    Thanks - I will give ng-dialog a try. The problem with a scrollable background for me is it's quite disconcerting for the user to scroll to the end of a modal and then have the background start scrolling, i.e. the behaviour is unexpected. – Andrew Jan 28 '14 at 22:08
  • FYI, if you're still running into the scrolling background issue, this appears to be a workaround: http://stackoverflow.com/questions/20563681/how-to-prevent-scrolling-of-the-body-content-when-bootstrap-modal-is-open – John Feb 27 '15 at 22:22