How to style md-card directive in angular js?

Question

How to style material js component in inline style or my local css file.I have tried using defining class in directive like below code,

<md-card style="width: 20px;">

Add some more code or check out this link: codepen.io/pen/?&editable=true might be helpful. — Avinash Sharma
– Avinash Sharma, Commented Nov 22, 2019 at 14:03

user5714726 · Accepted Answer · 2020-06-04 20:05:57Z

0

Why not use flex?

<div layout="row">
  <md-card flex="20"></md-card>
</div>

answered Jun 4, 2020 at 20:05

user5714726

4906 silver badges9 bronze badges

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

Comments

Narmada Muralikrishnan · Accepted Answer · 2022-11-17 17:49:54Z

To style the md-card, give a class or id to the md-card tag and apply CSS to it.

Refer to https://codepen.io/narmadamurali02/pen/LYrzwJz

HTML code

<section ng-app="app">
<article ng-controller="MainCtrl">
<div layout="row" layout-align="start start" layout-fill>
  <md-card id="preview-table" class="preview-outer-container" style="width: 550px; height: 370px;">
    <md-toolbar id="preview-header">
      <div>card header
      </div>
    </md-toolbar>
    <md-card-content class="pa-5">
      <div>
        card body
      </div>
      <md-card-content />
  </md-card>
  </div>
  </article>
  </section>

CSS code

.preview-outer-container {
  box-shadow: none;
  border: 1px solid #ddd;
}

#preview-header {
  background: #000;
  border-bottom: 1px solid $border-color;
  font-size: 12px;
  min-height: 30px;
  color: #fff;
  height: 25px;
  cursor: move;
  padding: 10px;
}

JS code

var app = angular.module("app", ["ngMaterial"]);
 app.controller("MainCtrl", ctrl);
 function ctrl($scope, $element) {}

In the above example, I have removed the box-shadow to md-card and for md-toolbar I have overridden the default color blue to black.

Output: https://i.sstatic.net/fdvfL.png

Collectives™ on Stack Overflow

How to style md-card directive in angular js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related