Override Inline Styles added via JS with CSS

Question

A js plugin is adding a style that is giving me some headache:

element.style {
     z-index: 100 !important;
}

So i have tried this:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox    
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView   
div.janrainHeader[style] {
    z-index: 1 !important;
}

and still nothing.

Streeter

may be you should override with javascript – Palomino

ye, i didn't really want to go down the route of JS override. Plus i'd have to listen for when the js becomes activated as the plugin takes a while to load already. humm i was hoping this wasn't the only option even though i thought it was. – Streeter

Answer 1

Contrary to the other answers, it is possible to override inline styles with CSS:

http://css-tricks.com/override-inline-styles-with-css/

I would guess that the extremely long selector might not be hitting the element.

I had a similar z-index issue with the Janrain plugin that was solved by this:

#janrainEngageEmbed > div[style] {
    z-index: 0;
}

In your case, you probably need:

    z-index: 0 !important;

Entrammel

Answer 2

The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )

Vibrant

@JosephtheDreamer the inline style has !important - check the question – Unpriced

js seems the only option, but i'll have to come up with a good solution and somehow listen for when the js becomes active – Streeter

@JohnGreen-PageSpike my comment was a reply to Joseph's comment - that he then deleted - about using !important to override the inline style, my point was - can't be done because the plugin is setting the inline style with !important as well. him deleting his own comment, rendered mine meaningless. – Unpriced

Answer 3

inline style always override external and internal css, plus the fact that the plugin is using the !important clause (very bad practice!), all together makes it impossible to get it fixed with css only. I reckon you will have to use some custom js to override the plugin settings.

maybe the best way would be to check if you can specify a callback function with the plugin and set the style as you wanted. another answer here suggested to edit the plugin itself, that is cool if you don't plan to ever update it - otherwise you're better off leaving the plugin code as it is, and just adding some bespoke js of your own

Unpriced

ye, trouble is its an outside loaded plugin so i don't this as an option :( but thanks anyway :) – Streeter