I am trying to add an area md-buttonto an area md-tabs. Using developer tools, I see that there is a button. This is not visible though:
Screenshot
I thought using a z-index in css with a very high value would solve the tghe problem, it is not:
.superclick {
right: 0;
position: absolute;
z-index: 100;
}
Also, the button is not available, and I'm not sure the reason is that it lies in the background.
What am I missing here? How can I bring a button to the fore?
Please see my fiddle or my code:
<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-tabs>
</md-content>
</div>
</div>
</body>
source
share