I'm attempting to insert an md-button into a md-tabs section. Through the use of developer tools, I can confirm that the button is present, but it's not visible:
Check out the screenshot here.
I tried adjusting the z-index in the CSS to a high value, but unfortunately, that didn't resolve the issue:
.superclick {
right: 0;
position: absolute;
z-index: 100;
}
In addition, the button isn't clickable which leads me to suspect that it might be positioned in the background.
What am I overlooking here? How can I ensure the button appears in the foreground?
Take a look at my fiddle or review the code below:
<body>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('MyCtrl', function ($scope) {
$scope.statuses = [
{id: 1, name: "One", description: "First Tooltip"},
{id: 2, name: "Two", description: "Second Tooltip"},
{id: 3, name: "Three", description: "Third Tooltip"},
];
$scope.addTab = function(){
$scope.statuses.push({id: $scope.statuses.length + 1, name: $scope.statuses.length + 1, description: "New Tooltip"});
}
$scope.removeTab = function(status){
alert(status.id);
var index = $scope.statuses.indexOf(status);
$scope.statuses.splice(index,1);
}
});
</script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<md-content class="md-padding">
<md-tabs class="" md-selected="selectedTab" md-align-tabs="top" md-border-bottom md-autoselect md-dynamic-height>
<md-tab ng-repeat="status in statuses">
<md-tab-label>
{{status.name}}
<md-tooltip md-direction="bottom">
{{status.description}}
</md-tooltip>
</md-tab-label>
<md-tab-body>
<md-button ng-click="removeTab(status)">Remove Tab</md-button>
</md-tab-body>
</md-tab>
<md-button class="superclick">Superclick</md-button>
<!--<md-tab ng-click="addTab()">
<md-tab-label> + Add Tab</md-tab-label>
<md-tab-body>
</md-tab-body>
</md-tab>-->
</md-tabs>
</md-content>
</div>
</div>
</body>