CODEWITHSUNDEEP
htmlcssangularjs-material
user10310564
user10310564

Reputation:

Set scroll y for md-tab-body div using AngularJS matrial

enter image description here

I used angularjs material tabs here I need scroll for "md-tab-body" section, I have tried all the possibility from stack overflow but not working scroll.

<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>

The above code i used my application. I need help to set oveflow-y for body section.

Upvotes: 0

Views: 280

Answers (1)

user3458271
user3458271

Reputation: 660

You can do something like this may this help you in case if your scenario is like this:

<!-- 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%;
 }

And not sure as not tested this code.

Upvotes: 1

Related Questions