1

I have <h1/> and <input/> elements, and once a text is inputted, a <button/> appears/renders

1 Answers1

0

Although you might have to make some changes depending on your entire HTML structure and CSS styles, you could do

<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>

    <div>
        <h1>Do Not Move Me</h1>
        <input
        placeholder='Enter Name'
        onChange={this._displayButton}
        value={this.state.nameText}
        />
    </div>

    <div>
    {this.state.textEntered ?
        <button
        type="submit"
        />
        : null
    }
    </div>

</div>

The main change i made is changed flexDirection from row to column, This makes the div children/sub divs appear below each other instead of appearing beside each other.

Edit:

<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start'}}>

added justifyContent property.

Edit 2:

<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>

    <h1>Do Not Move Me</h1>

    <div style={{ position: 'relative', marginLeft: 20 }}>

        <input
        placeholder='Enter Name'
        onChange={this._displayButton}
        value={this.state.nameText}
        />
        {this.state.textEntered ?
            <button type="submit" style={{ position: 'absolute', top: '-10px', right: '-10px', borderRadius: '50%', height: 40, width: 40, backgroundColor: '#881587', border: 'none' }} /> : null
        }

    </div>

</div>

You have to edit the button styles to make it look the way you want.

Dhruv Kumar Jha
  • 6,421
  • 8
  • 37
  • 48
  • but styling the button as such won't move the other elements anymore? –  Sep 10 '16 at 11:05
  • No, because `
    ` has its position set to `relative` and `button` is inside that div and its position is set to `absolute` so you can style button however you want and its position will be `constrained` to its parent div.. but you're free to play with `top`, `left`, `right`, `bottom` and other styles to make it appear wherever you want and look however you want.
     – Dhruv Kumar Jha Sep 10 '16 at 11:08
  • thank you so much! Worked like a charm. You never fail. Just another quickie, to make it dynamically reposition depending on the browser size, should I put the `top`, `left` etc. as in % rather than px? Accepted the answer and upvoted by the way of course –  Sep 10 '16 at 23:29
  • Actually I tried it and is a no go. How can I position it so that it moves relative the window width size and do not go over the screen and disappear when minimized? –  Sep 10 '16 at 23:31
  • It should move relative to window and its parent div size, Using `px` would be best here, also can you show screenshots of the issues happening now? – Dhruv Kumar Jha Sep 11 '16 at 06:22
  • got it to work beautifully! Thank you so much RandomUser. Another question if you don't mind: http://stackoverflow.com/questions/39442419/reactjs-is-there-a-way-to-trigger-a-method-by-pressing-the-enter-key-inside –  Sep 12 '16 at 01:51