How Do Display a Boostrap/Angularui Alert Always on Top

Bootstrap alert in a fixed floating div at the top of page

Just wrap your inner message inside a div on which you apply your padding : http://jsfiddle.net/Ez9C4/

<div id="message">
    <div style="padding: 5px;">
        <div id="inner-message" class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">×</button>
            test error message
        </div>
    </div>
</div>

Drop down alert always top of screen - AngularJS

I think in a nutshell the 'AngularJS' way would involve:

• creating a notification service with an interface for publishing and subscribing to events
• creating a directive that subscribes to the notification service and handles rendering the markup for the notifications; and you roll your own using Angular's jqLite or jQuery, or wrap your directive around a jQuery notification plugin, like Toastr, then place the directive on your layout

I prototyped a working concept of what this would look like here. Obviously it's primitive. Besides styling the 'notifications', there's work to handle queuing up notifications, etc. But I think that shows the basic concept.

Anyway, now you can inject the Notifications service into any components of your application and fire notifications at it.

Displaying bootstrap alert using angular2

Last night I didn't see it, it was probably too late. But your problem is not having the this context in the inline function where you set saveSuccess.

I'd suggest you use lambdas or "fat arrow function". Instead of

function(data) { ... }

you do

(data) => { ... }

This way the this context will be preserved. Just use it wherever you need inline function and you will have no problems anymore! :)

---

Your code with the lambda function:

export class UserProfileComponent{
    saveSuccess: boolean;
    user: IUser;

    saveUser(user:IUser) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.editUserForm = user;
        this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
            headers: this.headers
        })
        .map((data: Response) => data.json) // <-- also add this to convert the json to an object
        .subscribe((data) => { // <-- here use the lambda

            // if the update is successful then set the value to true
            // this is getting updated
            if (data){
                this.saveSuccess = true;
            }
            else{
                this.saveSuccess = false;
            }
        });
    }
}

Angular UI Modal with high z-index not on top

In order to make this work you must create a custom style for the z-index property:

.zindex {
  z-index: 99000 !important;
}

And apply the class to the modal window:

$scope.modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      windowClass: 'zindex'
}); 

Example: http://plnkr.co/edit/4T5Om0EcFAh5i4WUgNYi?p=preview

Drop down alert always top of screen - AngularJS

I think in a nutshell the 'AngularJS' way would involve:

• creating a notification service with an interface for publishing and subscribing to events
• creating a directive that subscribes to the notification service and handles rendering the markup for the notifications; and you roll your own using Angular's jqLite or jQuery, or wrap your directive around a jQuery notification plugin, like Toastr, then place the directive on your layout

I prototyped a working concept of what this would look like here. Obviously it's primitive. Besides styling the 'notifications', there's work to handle queuing up notifications, etc. But I think that shows the basic concept.

Anyway, now you can inject the Notifications service into any components of your application and fire notifications at it.

---

Related Topics