Ad

STRANGE Behavior Of Css With React.js

- 1 answer

I'm facing REALLY strange(to me) behavior of my web app. Model of app is:

|-TaskBox
  \
   |-TaskList
     \
      |-TaskElement
      |-TaskElement
  \
   |-AddNewTask

And i get strange white gaps under each TaskElement like on the pic:

gaps

The code for task elements rendering in react is:

return (
    <div className="taskElement" style={this.state.style}>
        <div className="textArea">
            <p>{this.state.text}</p>
        </div>
        <div className="iconsArea">
            <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
            <i className="material-icons" onClick={this.Delete}>delete</i>
            <i className="material-icons">keyboard_arrow_down</i>
            <i className="material-icons">keyboard_arrow_up</i>
        </div> 
     </div>
);

I don't know why this gaps happen but when i add any plaintext symbol to xml render code gaps DISAPPEAR. What the hell is happening there?

ex of gaps disappear: no gaps

and the . added to code here: return (

<div className="taskElement" style={this.state.style}>
            <div className="textArea">
                <p>{this.state.text}</p>
            </div>
            <div className="iconsArea">
                <i className="material-icons" onClick={this.toEditMode}>mode_edit</i>
                <i className="material-icons" onClick={this.Delete}>delete</i>
                <i className="material-icons">keyboard_arrow_down</i>
                <i className="material-icons">keyboard_arrow_up</i>
       </div> .  (this is the dot i added)
       </div>
    );
Ad

Answer

Your taskElement is inline-block so adding vertical-align: top to it should do the trick.

Ad
source: stackoverflow.com
Ad