CODEWITHSUNDEEP
htmlcssangularjsangular-material
Panayiotis Irakleous
Panayiotis Irakleous

Reputation: 2696

Md-card padding

Hello i am using angular material. And i create an md-card with the following code:

<div  layout="row">
<md-card class="col-md-4">
  <div class="md-card-image" style="background-color: #40DEC8; text-align: center">
    <h1 style="color: white;">Title</h1>
  </div>
  <md-input-container>
    <label>Name</label>
    <input ng-model="detailsCtrl.parking.name">
  </md-input-container>
  <md-input-container>
    <label>District</label>
    <input ng-model="detailsCtrl.parking.district">
  </md-input-container>
  <md-input-container>
    <label>Description</label>
    <textarea ng-model="detailsCtrl.parking.description" columns="1" md-maxlength="500"></textarea>
  </md-input-container>
</md-card>

and the result is this: enter image description here

Is there any way to remove the white space (padding) shown with the black arrows and fill it with the green?

Upvotes: 1

Views: 4325

Answers (1)

devqon
devqon

Reputation: 13997

It is not the card that adds the padding, but it is the (I assume bootstrap) class col-md-4. A solution is to move your col-md-4 outside the md-card, like this:

<!-- The padding will be on this div instead of the card -->
<div class="col-md-4"> 
    <md-card>
        <div class="md-card-image" style="background-color: #40DEC8; text-align: center">
            <h1 style="color: white;">Title</h1>
        </div>
        <!-- Other html -->
    </md-card>
</div>

Upvotes: 1

Related Questions