CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
hey
hey

Reputation: 7829

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

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" )

Upvotes: 4

Views: 14351

Answers (3)

Evgeny Rivkin
Evgeny Rivkin

Reputation: 1

well, you should add or override alert styles with position:fixed if you want to "pin" it to the screen.. with additional properties left and top for positioning relative to viewport.

Upvotes: 0

DrewT
DrewT

Reputation: 5072

There are various css position properties that will help you.

.class_of_your_alerts {
    position: absolute; /* position: absolute rather than position: fixed 
                           because you will be declaring left, right, top, etc. */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; /* now it covers the whole browser window because all absolute
                  positioning properties are set to 0. Tweak to your liking
                  using px or percentage */

    z-index: 105; /* optional - if your application has a lot of layers that are 
                     already absolutely positioned, you may wish to up the z-index
                     which is essentially the element stacking order for the current
                     dom node */
}

Upvotes: 0

Jason Goemaat
Jason Goemaat

Reputation: 29214

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

enter image description here

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>

enter image description here

Upvotes: 7

Related Questions