Forums

I am using YUI 3.5.1 and I am still facing the issue to display scrollable datatable in a tabview. The table width is almost invisible when the tab containing the datatable is clicked. It is set to correct width only when the sort is clicked on the only column which is displayed.

I referred to the other topics in the forum which mentions that the issue is fixed but I am still facing the issue in 3.5.1. I am pasting some of the code snippets here for better understanding.

I render the tabview after rendering the table and I am not sure if this is causing the issue in any way.

TabView:
<div id="hometabs">
<ul>
<li><a href="#Login">Home</a></li>
<li><a href="#Submission">Submission</a></li>
<li><a href="#Reports">Reports</a></li>
<li><a href="#Ranking">Ranking</a></li>
<li><a href="#Admin">Admin</a></li>
</ul>
<div class="themebackground" style="background-color:#FFFFFF">
<div id="Login"><jsp:include page="logincontents.jsp" /></div>
<div id="Submission"><jsp:include page="displaycontacts.jsp" /></div>
<div id="Reports">Reports content</div>
<div id="Ranking">Ranking content</div>
<div id="Admin"><jsp:include page="admininput.jsp" /></div>
</div>
</div>

<script>
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
srcNode: '#hometabs'
});

tabview.render();
});
</script>


Datatable:(The code below is present in displaycontacts.jsp which is included in submissions tab)


<div id="basic"> </div>
<script>
YUI().use("datatable-sort","datatable-column-widths","datatable-scroll","datasource","datasource-get", "datasource-jsonschema","datasource-io","datatable-datasource", function(Y) {


var table = new Y.DataTable({
columns: [{key:"firstName", label:"First Name", sortable:true},
{key:"lastName", label:"Last Name", sortable:true},
{key:"companyName", label:"Company Name", sortable:true},
{key:"position", label:"Position", sortable:true},
{key:"email", label:"Email", sortable:true},
{key:"telephone", label:"Telephone", sortable:true},
{key:"selectcontact", label:"Interviewed",allowHTML: true, formatter: '<input type="drop-down list"/>',emptyCellValue: '<label for="field-3"></label><select id="field-3" name="field-3"><option value="1">Yes</option><option value="2">No</option></select>'},
{key:"selectcontact", label:'<input name="contentBox" type="checkbox" class="protocol-select-all" />',allowHTML: true, formatter: '<input type="checkbox" checked/>',emptyCellValue: '<input type="checkbox"/>'}
],
// and/or a summary (table attribute)
summary: "Example DataTable showing basic instantiation configuration",
width: '100%',
scrollable: 'y'
});
table.plug(Y.Plugin.DataTableScroll, {height:"300px"});


table.plug(Y.Plugin.DataTableDataSource, { datasource: myDataSource });
table.render("#basic");

table.datasource.load();

});
</script>

This worked. Thanks Juan!