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.
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;');
!important at all
The OP states they've already done that -> Done what?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.Any reason what could be the real issue here.. The answer is in the jQuery documentation that I quoted.Use JSON format instead of comma format. Like this,
$(".WarningCount").parent().css({"margin-left": "-1.4%"});
$( '.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.
$('.WarningCount').parent().addClass('margin-left-added-class')