Pure css nothing has margin

Question

<form className="pure-form">
    <fieldset>
         <input ref="email" type="email" placeholder="Email" 
                  value={this.state.emailInput} 
                  onChange={this.handleChange}
                   />
         <input ref="password" type="password" placeholder="Password" 
                        value={this.state.passwordInput} 
                        onChange={this.handleChange} 
                        />

        <label htmlFor="remember">
            <input ref="remember" id="remember" type="checkbox" /> Remember me?
        </label>

        <button onClick={this.handleLoginClick} type="submit" className="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

I just copy-pasted the example form from Purecss.io. How come everything sticks together? Why do they have no margin?

It is not `className`. It is just `class` – Murshid Ahmed Oct 13 '15 at 10:07 — Murshid Ahmed, Oct 13 '15 at 10:07
You copy pasted from http://purecss.io/forms/ ? `:-/` – Murshid Ahmed Oct 13 '15 at 10:09 — Murshid Ahmed, Oct 13 '15 at 10:09

score 2 · Accepted Answer · answered Oct 13 '15 at 10:03

2

You have the classes incorrectly added:

<form className="pure-form">

should be

<form class="pure-form">

...and so on.

<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
<form class="pure-form">
  <fieldset>
    <input red="email" type="email" placeholder="Email" />
    <input ref="password" type="password" placeholder="Password" />

    <label htmlFor="remember">
      <input ref="remember" id="remember" type="checkbox" />Remember me?
    </label>

    <button onClick={this.handleLoginClick} type="submit" class="pure-button pure-button-primary">Sign in</button>
  </fieldset>
</form>

answered Oct 13 '15 at 10:03

Paulie_D

107,962
13
142
161

This gets translated by React (javascript library) to normal html, I figured it out. It was React related. When I include the same html into my index.html file, no problem. This question can be closed – Seneca Oct 13 '15 at 10:19
It can't be "closed" as such. You can mark the answer correct though (or not). – Paulie_D Oct 13 '15 at 10:29

score 0 · Answer 2 · answered Oct 13 '15 at 10:13

0

Paulie_D is correct if you want to call any css class on any html tag then you need to follow the syntax like this

<tag class="classname"></tag>

    Eg:

    <form class="pure-form">
    form elements goes here 
    </form>

answered Oct 13 '15 at 10:13

Allen

319
2
9

Pure css nothing has margin

2 Answers2