Angular Material:每个 md-list-item 占据整个页面宽度，而 Sidenav 有长滚动条 [英] Angular Material: Each md-list-item takes full page width and Sidenav have long scrollbar

问题描述

我正在尝试使用菜单项列表创建有角度的材料 sidenav.当我在本地机器上运行代码时，每个 md-list-items 占据整页宽度，sidenav 有长滚动条.

但是当我在 codepen.io 上运行相同的代码时，它显示正确.

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" ><md-toolbar ng-controller="LeftCtrl"><div class="md-toolbar-tools"><h1>Sidenav Right</h1><span flex></span><md-button class="md-icon-bitton" aria-label="关闭菜单" ng-click="close()"><md-tooltip md-direction="right">关闭此菜单</md-tooltip><md-icon md-font-icon="material-icons">close</md-icon></md-button>

</md-工具栏><md-content flex role="导航"><md-list><md-list-item><md-button>第一个选项</md-button></md-list-item><md-list-item><md-button>第一个选项</md-button></md-list-item><md-list-item><md-button>第一个选项</md-button></md-list-item></md-list></md-content></md-sidenav><md-content flex><md-工具栏><div class="md-toolbar-tools"><md-button class="md-icon-button" aria-label="设置" ng-click="toggleLeft()" ng-hide="isOpenLeft()"><md-icon md-font-icon="material-icons">菜单</md-icon></md-button><h2><span>应用程序标题</span>

</md-工具栏></md-content></节>

这是代码笔:http://codepen.io/nhere/pen/yOwJxE

解决方案

尝试使用以下结构

<md-item><md-item-content>[内容在这里]</md-item-content></md-item></md-list>

I'm trying to create angular material sidenav with list of menu items. When Im running the code on local machine, Each md-list-items takes fullpage width and sidenav have long scroll bar.

But When I run the same code on codepen.io, It displayed correctly.

<section layout="row" ng-controller="AppCtrl">
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" >
        <md-toolbar ng-controller="LeftCtrl">
            <div class="md-toolbar-tools">
                <h1>Sidenav Right</h1>
                <span flex></span>
                <md-button class="md-icon-bitton" aria-label="Close Menu" ng-click="close()">
                    <md-tooltip md-direction="right">Close this menu</md-tooltip>
                    <md-icon md-font-icon="material-icons">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-content flex role="navigation">
             <md-list>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
            </md-list>
        </md-content>
    </md-sidenav>

    <md-content flex>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()" ng-hide="isOpenLeft()">
                    <md-icon md-font-icon="material-icons">menu</md-icon>
                </md-button>
                <h2>
                    <span>Application Title</span>
                </h2>
            </div>
        </md-toolbar>
    </md-content>
</section>

Here is the codepen:http://codepen.io/nhere/pen/yOwJxE

解决方案

Try to use the following structure

<md-list>
  <md-item>
    <md-item-content>
       [Content Here]
    </md-item-content>             
  </md-item>
</md-list>

这篇关于Angular Material:每个 md-list-item 占据整个页面宽度，而 Sidenav 有长滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！