search

devyumao / angular2-busy

Show busy/loading indicators on any promise, or on any Observable's subscription.
http://devyumao.github.io/angular2-busy/demo/asset/
MIT License
314 stars 102 forks source link

Overlay not 100% height of page when page has scroll #56

Open AndreMantas opened 7 years ago

AndreMantas commented 7 years ago

Hi.

Not sure if this has been fixed in recent versions (i have "angular2-busy": "^1.0.2", in my packages.json) but I'm finding this problem: When the page has scroll and an action at the bottom of the page triggers my

<div [ngBusy]="{busy: busy}"></div>

, the spinner and transparent overlay don't occupy all of the page height. It occupies only the part of the page that users see before scrolling down.

Found a fix by changing position: absolute to position: fixed in my busy-loading.sass but the spinner does not stick in the same position during all stages of the loading.

Any tips?

ws-gianni commented 7 years ago

Hi, I solved by editing the 'busy.css' file:

.ng-busy > dynamiccomponent > * { position: fixed; // old: absolute

.ng-busy-backdrop { position: fixed; // old: absolute

adamlubek commented 5 years ago

Adding this css fixed it for me (separate css file, referenced from angular.json, I'd discourage editing library's css file as it will be overwritten each time you reinstall/update it)

.ng-busy-default-spinner, .ng-busy-backdrop { position: fixed; }