首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Angular Material:每个md-list-item都有完整的页面宽度,并且Sidenav有很长的滚动条

Angular Material:每个md-list-item都有完整的页面宽度,并且Sidenav有很长的滚动条
EN

Stack Overflow用户
提问于 2016-05-11 03:28:30
回答 1查看 1.6K关注 0票数 2

我正在尝试创建带有菜单项列表的角度材质sidenav。当我在本地机器上运行代码时,每个md-list-item都会占用完整的页面宽度,并且sidenav会有很长的滚动条。

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

代码语言:javascript
运行
复制
<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>

下面是代码:http://codepen.io/nhere/pen/yOwJxE

EN

回答 1

Stack Overflow用户

发布于 2016-06-03 08:32:14

尝试使用以下结构

代码语言:javascript
运行
复制
<md-list>
  <md-item>
    <md-item-content>
       [Content Here]
    </md-item-content>             
  </md-item>
</md-list>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37147321

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档