using md-cards in a md-grid-list in Angular 2 mate

2019-06-25 10:34发布

I am new to angular 2 material design. What I am trying to achieve is to create a grid list using angular2 material and place md-cards inside md-grid-tile. Though the md-card have position:relative, they are overflowing the md-grid-tile. click this link, the cards are overlapping and they are overflowing the md-grid-tile in a md-grid-list

Following is the code that I have used:

<body>
    <md-toolbar layout="row"> <md-button class="menu">
    <md-icon md-svg-icon="menu"></md-icon> </md-button>
    <h3>Pipeline UI</h3>
    </md-toolbar>

    <md-grid-list cols="2" rowHeight="2:1" gutterSize="15px">
        <md-grid-tile layout-wrap *ngFor="let item of releaseType">
            <md-card flex layout-fill>
                <md-card-header>test1</md-card-header>
                <md-card-content>
            <stage [init]="item.submissions"></stage></md-card-content>
            </md-card>
        </md-grid-tile>
    </md-grid-list>
</body>

Any help to solve this is extremely appreciated :)

标签： angular css3 angular-material

1条回答

走好不送

2楼-- · 2019-06-25 10:54

From what I figured out,md-grid-tile creates inside another dom element called figure and one of its css rules is align-items: center;. I used:

md-grid-tile figure {
    align-items: flex-start!important;
}

0人赞添加讨论(0) 举报

using md-cards in a md-grid-list in Angular 2 mate

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间