md-next-button 不适用于有角材料

Question

I'm new in angular Material, I want to customize the tabs where I overdid the css of md-tabs like bellow:

.md-tabs.md-default-theme .md-tab, md-tabs .md-tab {
  background-color : white !important;
  margin-right:1em;
} 

and my code html is:

<md-content> 
  <md-tabs md-dynamic-height="" md-border-bottom="" style='border-radius: 3px 3px 0 0; !important'>
    <md-tab ng-repeat="itemTab in vm.tabs" label="{{itemTab.label}}" ng-if="vm.showedTabs.indexOf(itemTab.id) > -1">
      <div ng-include="'main.html'"></div><!--ici on insert nos pages de workflow-->
    </md-tab>
  </md-tabs>
</md-content>
<md-button class="md-raised md-primary" ng-click="vm.addNewTabs()">Add new tabs</md-button>

the function named vm.addNewTabs() is used to add new tabs dynamically and it's work fine. The problem when I override the css class, the md-next-button doesn't work, it appear but does not working and if I remove margin-right:1em; all it work fine.

Any one has a idea why this appear?

Answer 1

The md-next-button calls the canPageForward function inside of Angular Material to determine if the button should be enabled. This function looks like this:

function canPageForward () {
    var lastTab = elements.tabs[ elements.tabs.length - 1 ];
    return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth +
        ctrl.offsetLeft;
  }

Apparently your custom CSS isn't taken into account when calculating the sizes and this function is returning false, therefore disabling the button.

Answer 2

我使用下一个 scss 修复

md-tabs-canvas { md-pagination-wrapper, md-tabs-dummy-wrapper { white-space: nowrap; md-tab-item, md-dummy-tab { float: none; display: inline-block; } } }