Question

我在这里使用了angularjs材质选项卡，我需要在“ md-tab-body”部分进行滚动，我已经尝试了所有来自堆栈溢出的可能性，但无法使用滚动。

<md-tabs md-enable-disconnect md-dynamic-height md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}">
  <md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
    <md-tab-label>
      <span translate id="ipwardId{{$index}}">{{ward.name}}</span>
    </md-tab-label>
    <md-tab-body>
      <div style="margin:10px;" layout="row">
        <md-grid-list flex>
          <md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
            <md-grid-tile-header>
              {{::bed.name}}
            </md-grid-tile-header>
          </md-grid-tile>
        </md-grid-list>
      </div>
    </md-tab-body>
  </md-tab>
</md-tabs>

以上代码我使用了我的应用程序。我需要帮助为主体部分设置oveflow-y。

Answer 1

您可以执行以下操作，以防万一您的情况如下：

<!-- if you have any div outside-->
<div style="height:100%"> 
<md-tabs md-enable-disconnect md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}" class="helloHeight">
        <md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
            <md-tab-label>
                <span translate id="ipwardId{{$index}}">{{ward.name}}</span>
            </md-tab-label>
            <md-tab-body>
              <!-- try to inspect this div-->
                    <div style="margin:10px;height:100%;overflow-y: auto;" layout="row">
                        <md-grid-list  flex>
                            <md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
                                <md-grid-tile-header >
                                    {{::bed.name}}
                                </md-grid-tile-header>
                            </md-grid-tile>
                        </md-grid-list>
                </div>
            </md-tab-body>
        </md-tab>

.helloHeight{
   height:100%;
 }

并且不确定是否已测试此代码。

使用AngularJS matrial为md-tab-body div设置滚动y

1 个答案: