0

I create a small autocomplete jQuery plugin that will insert a div after the textbox it's attached to and I'm getting styles inheriting from each of the pages the plugin is used on.

So every one of my autocomplete boxes look different.

Is there a way to force the style on the dynamically create div?

user3953989
  • 1,844
  • 3
  • 25
  • 56
  • Try using !important... For example $('div').css({'color':'#000000 !important'}) – Donald Powell Aug 02 '17 at 19:25
  • What about for styles I'm not setting? I'm only setting positioning but it's grabbing font styles from it's parent. – user3953989 Aug 02 '17 at 19:32
  • Unfortunately, you're out of luck here. There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert). You will have to revert style changes manually See:https://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles – Donald Powell Aug 02 '17 at 19:41
  • If you can provide code it would make finding potential solutions easier. – Donald Powell Aug 02 '17 at 19:47

2 Answers2

2

I avoid using !important at all costs but have to use it as a last resort sometimes (jqxWidgets for example puts many of its styles directly on the element using inline styles so it is very hard to avoid customizing without !important).

The preferred approach is to specify css selectors that have higher specificity than what the library is using.

So #1 is to ensure that your styles are loaded after the library styles: last one in wins. But specificity counts too. If the library has a css selector that is more specific than yours then it'll win even if yours is loaded second.

So what are examples of specific selectors?

if your DOM looks like this 

<div class="foo">
    <ul>
        <li>
            <span class="bar">something</span>
        </li>
    </ul>
</div>

Then this type of selector will be very specific b/c it takes this specific type of DOM structure into account. 

.foo > ul li .bar { /* style goes here */ }

Customizing a 3rd party library is a game of who can make the most specific css selectors.

flyer
  • 1,414
  • 12
  • 13
  • 1
    I believe this was the piece I was missing! I went from .autoCompleteDiv > tr:hover to .autoCompleteDiv > table > tbody > tr:hover and that already made a big difference! I'll play around with it more and be more specific with my selectors – user3953989 Aug 02 '17 at 19:54
0

If the div is already in the dom, you can do it easily by adding an !important

$("div").css("width","100%","important");

If you dont have already try, look if an other script is not already putting a style "inherited" on your element.

Latsuj
  • 469
  • 1
  • 5
  • 14
  • If I'm not setting font in my styles but it's inheriting whatever the parent is using would I need to set every property just to make sure none get inherited? – user3953989 Aug 02 '17 at 19:34
  • Normally, the element that you add in the code should get the style from your parent's element. – Latsuj Aug 02 '17 at 19:40