I've been scouring the web for hours, but I can't seem to find a solution. Can someone please assist me in resolving this issue?
Issue: I integrated angular-datatables within an md-tab using Angular material. Everything was running smoothly until I decided to add the scrollY or scrollX option. As soon as I introduced the scroller option, the tables stopped displaying any content. Below is the code snippet:
<md-tabs md-dynamic-height md-selected="msWizard.selectedIndex" md-center-tabs="true">
<md-tab>
<md-tab-label>
<span>Product</span>
</md-tab-label>
<md-tab-body>
<table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance"
dt-options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">ID</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Image</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Name</span>
</div>
</th>
<th class="secondary-text">
...
...anded on string length limit.
</table>
Additionally, here is a snippet from my JavaScript function:
vm.dtOptions = {
dom : 'rt<"bottom"<"left"<"length"l>><"right"<"info"i><"pagination"p>>>',
columnDefs : [
{
targets: 0,
width : '10px'
},
...
...
};
The code functions correctly when used outside of md-tab. Any ideas on how to resolve this issue? Your help would be greatly appreciated. Also, just to mention, I have already included "datatables" and "datatables.scroller" as per the provided example.