I am trying to implement tabs in AngularJS using Angular Material.
I have some tabs. On clicking over a tab, the content specific to that tab should be displayed. But the problem I am facing is that, the content of that tab doesn't occupy the full device length.
<md-tabs md-selected="selectedIndex">
<md-tab md-on-select="onTabSelected(tab)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled">
<md-tab-label>
<p>Tab A</p>
</md-tab-label>
<md-tab-body>
<p>Content of tab A</p>
<div infinite-scroll="loadMore(tab.id)" infinite-scroll-disabled="busy">
<div ng-repeat="p in products">
<div class="well">
<h3>{{p.id}}</h3>
<h5>{{p.cat_id}}</h5>
</div>
</div>
<div ng-show="busy">Loading more products....</div>
</div>
</md-tab-body>
</md-tab>
</md-tabs>
"md-tab-body" directive specifies the tab content.
In the above code, I just intend to implement ng-Infinite scroll as a part of tab content. But somehow, tab content occupies only a part of the page length.
Is there any solution by which I can make the tab content occupy full length of the page.
I am not sure if there are any other solutions for this problem, but the simplest one is to use md-dynamic-height attribute on md-tabs directive.
<md-tabs md-dynamic-height>
.....
</md-tabs>
This is all that you need!
Related
I have code using the following angularjs material functionality:
<md-tab md-on-select="something" label="{{subsetKey}} ({{subset.data ? subset.data.length : 0;}}) <i class='example icon class'></i>" ng-repeat="(subsetKey, subset) in dogBreeds[(dog === 0 ? 'All' : dog.BreedID)].subsetList">
I need to add an icon with this label, but it renders as text rather than the icon like:
<md-tab-item>
Labrador <i class='example icon class'></i>
</md-tab-item>
Please note, this doesn't use the structure found in the AngularJS demo below
https://material.angularjs.org/latest/demo/tabs
<md-tab id="something">
<md-tab-label>something label</md-tab-label>
<md-tab-body>something body</md-tab-body>
</md-tab>
Any help would be greatly appreciated.
I think you should change your code to something like this:
<md-tabs>
<md-tab md-on-select="something" ng-repeat="item in items">
<md-tab-label>
Labrador
<i class='example icon class'></i>
</md-tab-label>
<md-tab-body>
{{item}}
</md-tab-body>
</md-tab>
</md-tabs>
I do not know how much you need to have your code like it is right now, but changing it to something more structured would be easier for you as you can also add all the info you need!!
I am new to angularJS, I am trying md-tabs to create an items page, where each item is a tab on the page listing its details, here is my HTML code:
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom="" md-autoselect="">
<md-tab ng-repeat="itemTab in itemList" label="{{itemTab.name}}">
<div style="padding: 35px; text-align: left;">
<div ng-repeat="detail in itemTab.details">
<p><pre>{{detail.info}}</pre></p>
</div>
</div>
</md-tab>
</md-tabs>
</md-content>
Here when the number of items increases, more than it can show on the page there is no pagination arrow that would help me to scroll to next set of items, can anyone help me with this problem?
The issue is probably related to you css. Try including the angular material css only and try if it works.
I'm new to angular material and my question is how i can show different html file for each md-tab. for example, i have 3 tabs: the first for catalog.html, the second for manage.html and the third for orders.html.
Thanks!
EDIT 1:
so i did this:
<md-tabs >
<md-tab label="Product catalog">
<div ng-include src="#"></div>
</md-tab>
<md-tab label="Workers management">
<div ng-include src="employeesPage.html"></div>
</md-tab>
</md-tabs>
inside index.html, but nothing is shown...
<md-tab label="Catalog">
<div ng-include src="'catalog.html'"></div>
</md-tab>
There is a strange behavior on the graph when I open dialog and click on the next tab. The axis just disappear :/
I've defined graphs separately in two controllers and bind to the md-tabs:
<div class="md-padding" id="popupContainer" ng-cloak>
<md-content>
<md-tabs md-dynamic-height md-selected="selectedIndex">
<md-tab label="Tab 1" aria-controls="Tab 1"><span flex=""></span>
<div class="panel-body" ng-controller="GraphCtrl" ng-cloak>
<svg id="chart1" width="450" height="300"></svg>
</div>
</md-tab>
<md-tab label="Tab2" aria-controls="Tab 2"><span flex=""></span>
<div class="panel-body" ng-controller="Graph2Ctrl" ng-cloak>
<svg id="chart2" width="450" height="300"></svg>
</div>
</md-tab>
</md-tabs>
</md-content>
</div>
Please take a look at the plunker what is going on.
You will need to call the resize on tab select(why i think this is the issue, because if you resize your browser you will see the x/y scales come back!)
Something like this on tab select of Tab 1
$scope.chart_grid_lines.resize()//in reference to your plunk above
Something like this on tab select of tab 2
$scope.chart.resize()//in reference to your plunk above
I'm using angular material tabs but there is something wrong with my implementation and it gives me this result (on Chrome and Firefox):
As you can see the tab titles are truncated.
Here is my implementation:
HTML:
<md-tabs>
<md-tab ng-repeat="tab in tabs">
<md-tab-label>{{tab.titre}}</md-tab-label>
<div class="md-tabs-content">
content tab
</div>
</md-tab>
</md-tabs>
JS:
var tabs = [];
for(i=0;i<3; i++){
tabs.push({
titre: 'title'
});
}
$scope.tabs = tabs;
$scope.selectedTab = 0;
Added the plnkr:
http://plnkr.co/edit/nFMFmaGpLUwJPxRd1TpT?p=preview
Quoting from Angularmaterial docs for md-tab
Please note that if you use <md-tab-label>, your content MUST be wrapped in the <md-tab-body> tag. This is to define a clear separation between the tab content and the tab label.
So can you trying changing your code to:
<md-tabs>
<md-tab ng-repeat="tab in tabs">
<md-tab-label>{{tab.titre}}</md-tab-label>
<md-tab-body class="md-padding">
content tab
</md-tab-body>
</md-tab>
</md-tabs>