Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Notification styling issues browserify + browserify-shim #63

Open
tonestrike opened this issue Oct 2, 2016 · 0 comments
Open

Notification styling issues browserify + browserify-shim #63

tonestrike opened this issue Oct 2, 2016 · 0 comments

Comments

@tonestrike
Copy link

tonestrike commented Oct 2, 2016

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

@tonestrike tonestrike changed the title CSS not styling notifications browserify + browserify-shim Notification styling issues browserify + browserify-shim Oct 3, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant