CODEWITHSUNDEEP
cssangularjstwitter-bootstrapalertangular-ui-bootstrap
john Smith
john Smith

Reputation: 1605

Angularjs with bootstrap alert - keep the alert on screen when scroll down

I'm using the example from http://angular-ui.github.io/bootstrap/

<div ng-controller="AlertDemoCtrl">
     <alert ng-repeat="alert in alerts" type="{{alert.type}}"
        close="closeAlert($index){{alert.msg}}>    
    </alert>
    <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

When I'm scrolling down the the alert is disappearing from the screen. how can I move the alert down when the user scroll down?

Upvotes: 1

Views: 1706

Answers (2)

Ashish Madkaikar
Ashish Madkaikar

Reputation: 129

use bootstrap class 'affix' check this http://getbootstrap.com/javascript/#affix,

Upvotes: 0

pcnate
pcnate

Reputation: 1774

I suggest adding a class to your alert. Then as @DeadCalimero suggested, you add the following css:

.alert-float {
  position: fixed,
  top: 10px,    // adjust if needed
  z-index: 1000 // or higher if needed
}

Upvotes: 1

Related Questions