Issue
I can't seem to wrap my head around having this container in an md card.
In my material cards, I have this:
<div class="mat-card-header-text"> </div>
I've seen other people notice it. It causes a 40px space on the left of my title. No CSS seems to affect it either.
I am using Angular 4.x and Material2.
Solution
Fixed it using the following css and html:
md-card-title > span {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
margin-top: -81px;
margin-left: -24px;
font-size: 20px;
padding: 10px;
}
<div class="main" mat-padding fxLayout="row" fxLayoutWrap="no-wrap" fxLayoutAlign="center start" fxLayoutGap="15px">
<md-card class="mat-elevation-z2" mat-whiteframe="8" (click)="goToArticle(article)" *ngFor="let article of articleStore.articles() | async">
<img md-card-image src="{{ article.getCover() }}">
<md-card-title fxFlex>
<span>{{ article.title }}</span>
</md-card-title>
<md-card-content>
<p>{{ article.description }}</p>
</md-card-content>
</md-card>
</div>
Using <md-card-header></md-card-header>
gives some odd spacing issues. Not sure if this is a bug or not.
Answered By - flamusdiu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.