如何在Angular Material中使我的md-content可滚动?

时间:2016-04-08 15:43:00

标签: angularjs scroll angular-material material

我还没有找到适合我的答案......这是我的代码。我的内容没有滚动。我从基本模板中获取了ng-view。它只是一堆lorem ipsum,旨在延伸到页面的末尾,以便我可以测试这段代码。

要使我的内容可滚动,我需要做什么?我根本无法滚动页面。

我在grunt serve开发服务器上运行它。一切都是通过凉亭安装的。正确地包括Ang材料。一切看起来像它应该是,它只是不滚动。

(作为旁注,我的FAB昨晚在右下方的正确位置,我只是认为这更重要,所以我不专注于它?现在位置。它漂浮在页面的中间右侧。)

<body ng-app="webApp" layout="column">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <md-toolbar class="md-whiteframe-4dp">
        <div class="md-toolbar-tools">
            <!-- left side -->
            <span flex></span>
            <!-- right side -->
            <md-button class="md-raised" aria-label="Learn More" ng-href="#/contact">
                Contact Me
            </md-button>
        </div>
    </md-toolbar>

    <md-content layout="row" flex>
        <md-content id="content" flex>
            <md-content class="container md-whiteframe-6dp">
                <md-content hide show-gt-sm flex layout-padding class="main-text main-view">
                        <div ng-view></div>
                </md-content>
                <md-content hide show-sm show-xs flex layout-padding class="main-text">
                    <div ng-view></div>
                </md-content>
            </md-content>
        </md-content>

        <div ng-controller="FabCtrl as fab" class="lock-size" layout-align="end end">
            <div class="corner-pad">
                <md-fab-speed-dial md-open="fab.isOpen" md-direction="{{fab.selectedDirection}}" ng-class="fab.selectedMode" ng-mouseenter="fab.isOpen=true" ng-mouseleave="fab.isOpen=false" ng-cloak>
                    <md-fab-trigger>
                        <md-button aria-label="menu" class="md-fab md-primary md-hue-4 md-whiteframe-4dp" ng-href="tel:9106507122">
                            <md-tooltip md-direction="left" md-visible="tooltipVisible">Call Me</md-tooltip>
                            <ng-md-icon icon="phone" size="25"></ng-md-icon>
                        </md-button>
                    </md-fab-trigger>

                    <md-fab-actions>
                        <md-button aria-label="email" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="mailto:jacobkdick@gmail.com">
                            <md-tooltip md-direction="left" md-visible="tooltipVisible">Email Me</md-tooltip>
                            <ng-md-icon icon="email"></ng-md-icon>
                        </md-button>
                        <md-button aria-label="phone" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="tel:9106507122">
                            <md-tooltip md-direction="left" md-visible="tooltipVisible">Follow Me</md-tooltip>
                            <ng-md-icon icon="twitter"></ng-md-icon>
                        </md-button>
                        <md-button aria-label="github" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="https://github.com/jacobkdick" target="_blank">
                            <md-tooltip md-direction="left" md-visible="tooltipVisible">Fork Me</md-tooltip>
                            <ng-md-icon icon="github-circle"></ng-md-icon>
                        </md-button>
                    </md-fab-actions>
                </md-fab-speed-dial>
            </div>
        </div>
    </md-content>
</body>

编辑:刚刚在我的CSS上应用了overflow scroll标签。这是一个从右下角开始的时髦结果。两个滚动条都被禁用

scrollbars overlay disabled&lt;&lt;点击这里查看图片

0 个答案:

没有答案