CODEWITHSUNDEEP
materialize
Berglund
Berglund

Reputation: 676

how to make a full width button inside card in materializecss?

I'm trying to get a full width button inside my materialize css card and I've achieved the following result so far.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12">
    <div class="card teal lighten-4">
      <div class="card-content">


        <article id="post-946650" class="post-946650 page type-page status-publish hentry">
          <p><input id="id_func_calc" type="hidden" value="[[{&quot;assign&quot;:[&quot;#_z&quot;],&quot;eval&quot;:&quot;#y/#x&quot;}]]">
          </p>
          <div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
            <input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
            <span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
            <span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
          </div>
          <p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
        </article>


      </div>

    </div>
  </div>
</div>

But the issue is the button is not inside the card and only half. Any help is appreciated.

Upvotes: 1

Views: 197

Answers (1)

user11725933
user11725933

Reputation:

Add row to the 4th div which is with the class name card-content

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    <div class="row">
      <div class="col s12">
        <div class="card teal lighten-4">
          <div class="card-content row">
            <article id="post-946650" class="post-946650 page type-page status-publish hentry">
              <p><input id="id_func_calc" type="hidden" value="[[{&quot;assign&quot;:[&quot;#_z&quot;],&quot;eval&quot;:&quot;#y/#x&quot;}]]"></p>
              <div class="mathquill-embedded-latex mathquill-rendered-math">
                  <span class="text">Travel time(in minutes)</span>
                  <input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
                
                  <span class="text">Miles to destination</span> 
                  <input id="y" class="oInp" size="3" type="text"><br>
                
                  <span class="text">Avg speed</span> 
                  <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
                
                  <p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
                
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>

Upvotes: 2

Related Questions