AngularUI Modal - Preventing both body shift and scrolling

Question

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.

mainguy mainguy · Accepted Answer · 2014-01-27T11:15:16

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.

AngularUI Modal - Preventing both body shift and scrolling

1 Answers