Html Bug?

Raven

i have a tabcontainer on the first page the repeater is fine but on the second tab The columns become squashed up next to eachother instead of filling my page.
[code]










DocReq






Created Date


Name








<%# DataBinder.Eval(Container.DataItem, "CreatedDate", "{0:dd/MM/yyyy}")%>


<%# DataBinder.Eval(Container.DataItem, "DocumentName")%>






<%# DataBinder.Eval(Container.DataItem, "CreatedDate", "{0:dd/MM/yyyy}")%>


<%# DataBinder.Eval(Container.DataItem, "DocumentName")%>










[/code]

Raven

[code]



Doc Req 2






Created Date

[/code]
The second tab has basicaly exactly the same coding but the repeater gets squashed.

[code]



<!--This is coding for the repeater -->

$(document).ready(function () {
$('#tblDocReq1').dataTable({ "oLanguage": { "sSearch": "Search:" },
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],

});
});
$(document).ready(function () {
$('#tblDocReq2').dataTable({ "oLanguage": { "sSearch": "Search:" },
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]]
});
});

[/code]

Raven

I cant give a link as i dont have examples floating on the net, unless you want me to email you a jpeg of the the bug. But if you can imagine it, best explain like, first repeater correct table is 100% but on the second tab the repeater seems to have its columns squashed up.

Raven

ALLAN! YOUR A SMART MAN!, i came right :D your a geniues lol
okay so what i did was apply "bAutoWidth": false
which works. Thank you thank you.

allan

Heh - good you've got a solution, but the "real" way to fix this is shown in this example: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html . There is also an explanation as to what it does it this way.

Note that the example uses jQuery UI tabs - you are obviously using something else, but the principle applies - when he element is shown, you need to call the function to adjust the column sizing.

Allan

Raven

Hi Allan, hope you had a great valentines day.

im having a styling issue with the fontsize, when it comes to tabs.
Yes im using AjaxControlToolkit tabs.
On a normal repeater the style is fine, but a repeater inside a tab, has rather big font size.
[code]
$(document).ready(function () {
$('#tblCourtOrderTrace').dataTable({ "oLanguage": { "sSearch": "Search:" },
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"bAutoWidth": false,
"bStateSave": true
});
});
[/code]

my idea for a solution is to adjust the fontsize in the jquery coding example
[code]
$(document).ready(function () {
$('#tblCourtOrderTrace').dataTable({ "oLanguage": { "sSearch": "Search:" },
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"bAutoWidth": false,
"bStateSave": true
"aAdjustFont": 10px //apply fontsize
});
});
[/code]

can i do this? and do you know the syntax for it?

Raven

oh yes, this is to adjust the text for the header and data inside the table that i get. it cant be the demo table css, i use cause it works fine for the repeaters outside of the tab controll

Raven

for any one who has similiar issues here is the solution
[code]
$(document).ready(function () {
$('#tblLegalDetTrace').dataTable({ "oLanguage": { "sSearch": "Search:" },
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"bAutoWidth": false,
"bStateSave": true
});
$("#tblLegalDetTrace").css({ "font-size": "10px" });
});
[/code]