工具栏上方的Angular-Material 1英寸空白区域

Question

我注意到当我在Chrome上使用Angular Material工具栏时，我会在窗口顶部（页面，模态，对话框等）获得大约1英寸的空白区域。如何删除它？

生成模态的代码：

<md-dialog aria-label="Game Info and Map">
    <md-dialog-content>
        <md-toolbar flex layout="row" layout-align="space-between center">
            <img ng-src="{{schedule.HomeTeamLogo}}" class="TeamLogo" alt="{{schedule.HomeTeamName}} Logo" />
            <h5>{{schedule.GameDate | SLS_Date}} @ {{schedule.GameTime | SLS_Time:'hh:mm'}}</h5>
            <img ng-src="{{schedule.AwayTeamLogo}}" class="TeamLogo" alt="{{schedule.AwayTeamName}} Logo" />
        </md-toolbar>
        <section layout="column" layout-align="center">
            <div ng-init="coords={latitude: false, longitude: false}">
                <gm-map options="{center: [{{schedule.Latitude}}, {{schedule.Longtitude}}], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
                    <gm-marker options="{position: [{{schedule.Latitude}}, {{schedule.Longtitude}}], draggable: false}">
                        <gm-infowindow options="{content: '{{schedule.VenueName}}'}"></gm-infowindow>
                    </gm-marker>
                </gm-map>
            </div>
        </section>
    </md-dialog-content>    

    <section>
        <div class="md-actions">
            <md-button ng-click="CloseDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
        </div>
    </section>
</md-dialog>

Plunkr

Answer 1

史蒂芬，

在我看来，你的md-action css类有一个min-height: 52px。有点奇怪，但你可以在你的CSS中解决这个问题。尝试类似plunker的内容。如果此css更改影响的程度超过了应有的范围，请尝试将css专门用于添加新类等。

希望它会有所帮助：）