50

Tried using the 'zindex' prop, as suggested here: https://github.com/facebook/react/issues/1456

<Input ref="username" type="text" label="Username" 
placeholder="Enter username" zindex={1} />

Doesn't work. Also tried 'zindex="1"'

Any ideas?

Robert Kovačević
  • 1,378
  • 4
  • 16
  • 23

6 Answers6

55

you need to assign it using the style={} construct. Try this:

<Input ref="username" type="text" label="Username" placeholder="Enter username" style={{zIndex:1}} />
Eric S. Bullington
  • 1,001
  • 1
  • 11
  • 18
Blake
  • 1,168
  • 1
  • 14
  • 15
  • 3
    @Axel you edited my answer and made it incorrect. You will receive the following error when trying to add styles to react jsx dom elements in that way. "Uncaught Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX." – Blake Apr 04 '16 at 19:44
23

  1. always remember to use camel case. z-index becomes zIndex. margin-right becomes marginRight.

  2. you must call style. style={{ zIndex = 1}}

  3. you may want to pass relative or absolute.

<div style={{ position: 'relative', zIndex: '1' }}>
  bottom
</div>
<div style={{ position: 'relative', zIndex: '2' }}>
  top
</div> 
<Input ref="username" type="text" label="Username" placeholder="Enter username" zindex={1} />
Jarmos
  • 336
  • 1
  • 8
  • 22
Lesly Revenge
  • 894
  • 10
  • 16
4

Try this way...

style={{zIndex: '100'}}
Samir Ribeiro
  • 175
  • 9
0

Sometimes you may need to use !important to force your style being applied.

Example:

style={{ zIndex: '1 !important' }};
jhon26
  • 313
  • 2
  • 11
-1

when you are applying z-index then definitely you are trying to priorities your new part of code. So you also need to check if there are any other z-index with higher value which might be restricting your new z-index value

<Input ref="username" type="text" label="Username" 
placeholder="Enter username" class = "applyZIndex" />

.applyZIndex {
 z-index : 1;
}
Bishal Jain
  • 189
  • 1
  • 2
  • 10
-1

This works for me: style={{zIndex:1}}

Ripu Daman Sharma
  • 9