How do display a boostrap/angularUI alert always on top?

Question

I'm displaying some alerts using angular-UI which is basically powered by bootstrap. However the issue is that the alerts can't be seen by the client if they are navigating to the bottom of the page. I would like to know how can I display the alerts always on top ( I think the right term is "on fixed position" )

Answer 1

How exactly do you want it to work? It might be easiest to use a library like PNotify or AngularJS-Toaster (plnkr).

If you want to do it yourself, you could put them in a special area. For something like this you can put the alerts in a div that is position:fixed (plnkr):

<div style="position: fixed; top: 0; right: 0">
  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
      {{alert.msg}}
  </alert>
</div>