alexbeletsky / ng-notifications-bar

Angular.js component for stylish and flexible top bar notifications.
http://beletsky.net/ng-notifications-bar
149 stars 52 forks source link

Notification styling issues browserify + browserify-shim #63

Open tonestrike opened 7 years ago

tonestrike commented 7 years ago

I have installed ng-notifications-bar and successfully created a notification, and was able to style the notifications, but now the message is separated from the notification. Two bars appear. One is white and one is the color of the notification. The white bar contains the message and the colored bar is beneath it. Here is my installation.

Package.json

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "angular-breadcrumb": "./node_modules/angular-breadcrumb/release/angular-breadcrumb.js",
    "bootstrap-ui-datetime-picker": "./node_modules/bootstrap-ui-datetime-picker/dist/datetime-picker.js",
    "angular-bootstrap-show-errors": "./node_modules/angular-bootstrap-show-errors/src/showErrors.js",
    "ng-notifications-bar": "./node_modules/ng-notifications-bar/src/ngNotificationsBar.js"
  },
  "browserify-shim": {
    "angular": {
      "exports": "angular"
    },
    "angular-breadcrumb": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ncy-angular-breadcrumb').name"
    },
    "bootstrap-ui-datetime-picker": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ui.bootstrap.datetimepicker').name"
    },
    "angular-bootstrap-show-errors": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ui.bootstrap.showErrors').name"
    },
    "ng-notifications-bar": {
      "depends": [
        "./node_modules/angular/angular.js:angular"
      ],
      "exports": "angular.module('ngNotificationsBar').name"
    }
  },

I have required ng-notifications-bar in my app:

require('angular').module('admin', [
  require('angular-loading-bar'),
  require('angular-ui-router'),
  require('angular-ui-bootstrap'),
  require('bootstrap-ui-datetime-picker'),
  require('angular-bootstrap-show-errors'),
  require('angular-cookies'),
  require('angular-breadcrumb'),
  require('angular-resource'),
  require('angular-sanitize'),
  require('ui-select'),
  require('ngmap'),
  require('ng-notifications-bar'),
  require('textAngular')
])

I imported the styling using: @import (less) "/node_modules/ng-notifications-bar/css/ngNotificationsBar.css";

Do you know why this would happen? Here is an image of what it looks like:

fullscreen_10_3_16__2_07_am