Viewing {{#AdminLTE}} page overrides global body styles

[bjimdar]

Hey, great job on the nice style theme package. One point of feedback:

I was confused by a weird style bug that one of our testers filed on our site after adding this package to my existing Meteor project and adding a page with an {{#AdminLTE}} section.

The "bug" from our perspective, goes like this:

Repro:

1. Load a page in the [existing Meteor] site. Notice styles are normal.
2. Load the new page with an {{#AdminLTE}} section.

3. Go back to first page loaded in step 1.

   Expected: Styles on the non-AdminLTE page to be the same before and after a page with AdminLTE content is loaded

   Actual: Styles are all different in the entire Meteor application for the rest of that session. Links are now blue, and fonts have changed and some other stuff.

   Why this is happening

So it seems the reason for this behavior is that this package is dynamically loading and injecting the AdminLTE.min.css styles into the site the first time the {{#AdminLTE}} section is rendered.

This permanently dumps a bunch of global style into the site.

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto
}

What might be better

This is cool and all, but I guess I was expecting that any styling added by the package would be limited in it's effects to only content inside the {{#AdminLTE}} {{/AdminLTE}} section blocks.

I understand that you "just wrote a Meteor wrapper for the AdminLTE package" and if it's not working for me I can just remove the package and import the original source myself, but I got your package in my app as a dependency of yogiben:admin package. So even if I pull out your package, I still get the same behavior anytime one of my users views the content from that package.

Can styles that cause side-effects outside {{#AdminLTE}} section be removed? If not, can a setting be added to turn if off for users who don't want their global styles overridden?

[mpowaga]

Good point. It should detach css when AdminLTE is destroyed but seems to be not the case. Anyway we will use class instead of global elements.

[14falcons]

I also encountered some css-override challenges that point to the use of !important in the AdminLTE.min.css. Also using as a yogiben:admin package dependency so no access to css. This is affecting site css where there are potential name conflicts like bg-blue and other common names. If !important could be removed from AdminLTE.min.css it would eliminate these conflicts or at least make them manageable since they would be more easily fixable on our end without having to hunt down conflicts and change div names, etc. !important can cause more problems than it solves, but it is quick so we all go there.... Otherwise AdminLTE is amazing!