-1

I am trying to apply an inline css using below statement. 

$('.WarningCount').parent().css('margin-left', '-1.4% !important;');

But it doesn't work, it doesn't get applied only. I cannot see this style in the Developer console. I had to override the entire style to make it work.

$('.WarningCount').parent().attr('style', 'margin-left:-1.4% !important;');

Any reason what could be the real issue here.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
nraina
  • 324
  • 2
  • 20
  • 1
    Could you create [mcve] for us to see, we need the html also to even try to find the error, might also need the other css-rules that apply to the parent-element. – Esko Aug 24 '18 at 10:02
  • please post your html too – charan kumar Aug 24 '18 at 10:05
  • 1
    See the duplicate for a fix to the immediate issue. I would suggest you structure your CSS selectors to use selector precedence correctly instead, though. It's a more extensible fix. – Rory McCrossan Aug 24 '18 at 10:12
  • I would suggest using classes like the JQuery Documentation says, `$('.WarningCount').parent().addClass('margin-left-added-class')` – sertsedat Aug 24 '18 at 10:15

3 Answers3

1

Taken from the jQuery documentation:

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

Though, you can refer to this answer and use cssText attribute

const target = $('.WarningCount').parent();
target.css('cssText', target.attr('style')+'margin-left: -1.4% !important;');
Sharcoux
  • 5,546
  • 7
  • 45
  • 78
  • 1
    The OP states they've already done that. A much better solution would be to structure the CSS rules properly so you don't need to use `!important` at all – Rory McCrossan Aug 24 '18 at 10:05
  • `The OP states they've already done that` -> Done what? – Sharcoux Aug 24 '18 at 10:08
  • Use the `css()` solution. The `parent().css()` example you show has the same problem as in the OP - the quote you even took from the docs explains why this won't work. Also, if you believe another question has the solution, please vote to close this as a duplicate. Don't add another answer to this question with a link as it stops the Roomba from deleting this question. – Rory McCrossan Aug 24 '18 at 10:08
  • You're right. Let me fix – Sharcoux Aug 24 '18 at 10:10
  • It makes more sense to just delete this – Rory McCrossan Aug 24 '18 at 10:11
  • 1
    You're wrong. The question of the PO is `Any reason what could be the real issue here.`. The answer is in the jQuery documentation that I quoted. – Sharcoux Aug 24 '18 at 10:14
0

Use JSON format instead of comma format. Like this,

$(".WarningCount").parent().css({"margin-left": "-1.4%"});
Gajanan Kolpuke
  • 155
  • 1
  • 1
  • 14
0
$( '.WarningCount' ).parent().each(function () {
    this.style.setProperty( 'margin-left', '-1.4%', 'important' );
});

The .setProperty method of an element's style object or part of CSSStyleDeclaration enables you to pass a third argument which represents the priority. So, you're overriding !important with your own !important value.

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

Hope this clears any doubts regarding the same.

Sumodh Nair
  • 1,656
  • 1
  • 11
  • 34