How to add 'important' to zIndex

Question

I have conflict between some add-ons on my site. Using Firebug, I noticed that if I add "!important" to the z-index I can avoid the conflict.

but the z-index value is set using JavaScript and not CSS

so how do I add "!important" to the following JS code:

this.menu = $("<ul>")
   .addClass("ui-autocomplete")
   .appendTo(this.document.find(this.options.appendTo || "body")[0])
   .zIndex(this.element.zIndex() + 1)  // !! <- here // !!
   .hide()
   .data("menu");

EDIT: from the proposed answer [How to apply !important using .css()? ] I understand that I need to add the following code -

if (XXX.style.setProperty) {  // IE 9- does not support...
    XXX.style.setProperty ("z-index", (this???.element.zIndex() + 1), "important");
  }

How do I add it: what is XXX in my case? and "this" ?

Edit 2: Since it became jQuery syntax question, I asked it with different tags in - How to add 'if' to jQuery chain code

possible duplicate of [How to apply !important using .css()?](http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) — Saad, May 31 '15 at 09:40
The zIndex value is calculated from parent element : .zIndex(this.element.zIndex() + 1) so I cannot use CSS rule — Atara, May 31 '15 at 09:47

score 3 · Accepted Answer · edited May 23 '17 at 12:31

I received the answer in another thread - How to add 'if' to jQuery chain code

use -

.each(function() {
    this.style.cssText+= 'z-index: '+(parseInt($(this).css('z-index'))+1)+' !important';
  })

but after struggling with the code in several functions, I preferred to add a class and a rule to this class -

this.menu = $("<ul>")
  .addClass("ui-autocomplete")
  .addClass("ui-autocomplete-hover-header")  // !! added!
. . .

.ui-autocomplete.ui-autocomplete-hover-header {  
  z-index: 5004 !important; }

score 1 · Answer 2 · answered May 31 '15 at 09:57

1

I think i got this

this.menu = $("<ul>")
   .addClass("ui-autocomplete")
   .appendTo(this.document.find(this.options.appendTo || "body")[0])
//   .zIndex(this.element.zIndex() + 1)  // !! <- here // !!
   .style.setProperty ("zIndex", zIndex()+1, "important");
   .hide()
   .data("menu");

answered May 31 '15 at 09:57

lakshya_arora

791
5
18

Thanks. and how do i add the "if" to check for browser support? – Atara May 31 '15 at 10:26
`.style` is not a method of a jQuery collection, so this won't work. – Rick Hitchcock May 31 '15 at 13:26

score 0 · Answer 3 · answered May 31 '15 at 09:48

0

Why not using css to this? For example

this.menu = $('<ul class="high-zindex">')....

and then define .high-zindex { z-index: 9999 !important }

answered May 31 '15 at 09:48

Tamaro Tamaroidny

220
3
8

score -2 · Answer 4 · answered May 31 '15 at 09:43

-2

Try this out.

.zIndex(this.element.zIndex() + 1 + '!important')

answered May 31 '15 at 09:43

Jugal Panchal

97
4

1

wont work since everything is converted to string if zindex is 99 it will become 991 – lakshya_arora May 31 '15 at 09:50
This will work: .zIndex(this.element.zIndex() * 1 + 1 + '!important') – JVM Aug 03 '17 at 21:47

How to add 'important' to zIndex

4 Answers4

Linked