STRANGE behavior of css with react.js

Question

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:

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:

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>
    );

@MichelleTilley which ones do you want? All code is at github.com/feijihn/todolist_react and you can also go to 84.23.33.186:3000 if you want some firebug exploring — Ilya Lopukhin
– Ilya Lopukhin, Commented Jan 23, 2016 at 21:29
Please help us with the styles for the classes in your html sample, so we don't need to scan through all your css. — Asons
– Asons, Commented Jan 23, 2016 at 21:35
inspect the whitespace using your browser's development tools and figure out who's adding extra margins or padding. — Dan O
– Dan O, Commented Jan 23, 2016 at 21:35
@DanO I can't find any extra paddings or margins. You can try yourself at 84.23.33.186:3000 To LGSon: Everything in the repo github.com/feijihn/todolist_react inside public/css folder — Ilya Lopukhin
– Ilya Lopukhin, Commented Jan 23, 2016 at 21:38

Asons · Accepted Answer · 2016-01-23 21:42:28Z

2

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

answered Jan 23, 2016 at 21:42

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilya Lopukhin Over a year ago

It did! I would appreciate any explanation to this situation because i still don't understand the origin of these gaps

Asons Over a year ago

This article describes it very well: css-tricks.com/fighting-the-space-between-inline-block-elements

Collectives™ on Stack Overflow

STRANGE behavior of css with react.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related