How to set z-index on a component?

react-bootstrap
Robert Kovačević picture Robert Kovačević · Nov 27, 2015 · Viewed 55.6k times · Source

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?

Answer

Blake picture Blake · Mar 30, 2016

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

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

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More