md-next-Taste nicht mit Winkelmaterial arbeiten

Question

I in Winkel-Material neu bin, möchte ich die Tabs anpassen, wo ich die CSS von md-tabs wie unten overdid:

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

und mein Code html ist:

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

die benannte Funktion vm.addNewTabs() wird verwendet, dynamisch neue Registerkarten hinzufügen und es ist gut funktionieren. Das Problem, wenn ich die CSS-Klasse überschreiben, die md-next-button funktioniert nicht, es scheint, aber nicht funktioniert, und wenn ich margin-right:1em; alles entfernen, funktioniert es gut.

Hat jemand eine Idee, warum dies erscheint?

Answer 1

Der md-next-button ruft die Funktion canPageForward innerhalb von Angular Material auf, um zu bestimmen, ob die Schaltfläche aktiviert werden soll. Diese Funktion sieht wie folgt aus:

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

Anscheinend Ihre benutzerdefinierte CSS nicht berücksichtigt wird, wenn die Größen zu berechnen und diese Funktion false zurückgibt, damit die Taste deaktivieren.

Answer 2

i verwenden nächsten SCSS fix

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