CODEWITHSUNDEEP
htmlcssmaterialize
Daniel Oram
Daniel Oram

Reputation: 8411

Display Materialize input fields inside of Card

I have this html using materialize css 

<!-- Sign Up Card row -->
<div class="row">
      <div class="col s12 m12">

        <div class="card">
          <div class="card-content">

            <span class="card-title"><h3>Sign up to find out more.</h3></span>

              <form class="container">
                <div class="input-field col m6">
                  <input id="email" type="email" class="validate">
                  <label for="email">Email</label>
                </div>

                <div class="input-field col m6">
                  <button class="btn waves-effect waves-light" type="submit" name="action">
                    Submit <i class="material-icons right">send</i>
                  </button>
                </div>

              </form>  

          </div>          
        </div>
      </div>
    </div><!-- End of Sign Up Card row -->

Which is giving me this result

card-form

When I remove the col m6 classes from the input-field divs it shows them correctly within the card but stacked one on top of the other.

How do I achieve having both divs inside the card and positioned on the same row?

My UI Design of desired composition of card desired card



Update

Working JSFiddle

Note: Modifying the css itself is undesired and a last resort. The prime solution should use only materialize css for which I think I should have been more specific.

Upvotes: 1

Views: 6773

Answers (2)

pandamakes
pandamakes

Reputation: 591

use <div class="row"></div> to wrap around the div.col tags

jsfiddle

 <!-- Sign Up Card row -->
            <div class="row">
              <div class="col s12 m12">
                <div class="card">
                  <div class="card-content">
                    <span class="card-title"><h3>Sign up to find out more about Two Lanterns.</h3></span>
                      <form class="container">
                        <div class = "row">

                          <div class="input-field col m6">
                            <input id="email" type="email" class="validate">
                            <label for="email">Email</label>
                          </div>
                          <div class="input-field col m6">
                            <button class="btn waves-effect waves-light" type="submit" name="action">
                              Submit <i class="material-icons right">send</i>
                            </button>
                          </div>
                        </div>
                      </form>


                  </div>

                </div>
              </div>
            </div><!-- End of Sign Up Card row -->

Upvotes: 5

Nitin Dhomse
Nitin Dhomse

Reputation: 2622

Try this way, replace container block with following code. 

          <form class="container" style="display: flex">
            <div class="input-field ">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
            </div>

            <div class="input-field " style="padding-left:16px">
              <button class="btn waves-effect waves-light" type="submit" name="action">
                Submit <i class="material-icons right">send</i>
              </button>
            </div>

          </form>

Upvotes: 0

Related Questions