Ok, obviously im using Datatables. and i am also using the scroll able plug in.
While everything seems to work fine in Chrome, in Internet explorer, and Firefox, stuff is full of WTF. here is my code:
$(document).ready(function(){
var CaseNotes = $("#casenotes").DataTable({
ajax: function (d, c, s) {
var options = {
data: d,
callback: c,
url: base_url + '/CaseManagement/list_case_notes'
};
var url = window.location.href;
var index = url.lastIndexOf("/");
options.data.caseid = url.substring(index + 1);
$.DataTablesRequest(options);
},
serverSide: true,
responsive: true,
searching: false,
columns: [
{data: "noteid", class: "nodisplay"},
{data: "notedate", width: "10%"},
{data: "issues", width: "10%", createdCell: function (td, cellData, rowData, row, col) {
$(td).addClass('cnissues').addClass('vtop');
}, class: "cnissues"
},
{data: "timespent", width: "15%"},
{data: "note", createdCell: function (td, cellData, rowData, row, col) {
}, class: "cnissues", width: "55%", render: function (data, type, row, meta) {
return "<div class='cnnotes'>" + data + "</div>";
}
},
{data: "lastedit", width: "10%"}
],
columnDefs: [
{
className: 'noselect vtop',
targets: "_all"
}
],
"order": [[1, "asc"]],
dom: "rtiS<\"clearfix\">",
deferRender: true,
scrollY: 500,
scrollX: false,
scrollCollapse: true,
scroller: {
loadingIndicator: true,
displayBuffer: 10
}
});
});
the column width on chrome are acceptable id (hidden): 44px, 77px, 77px, 132px, 581px, 76px.
Fire Fox and Internet explorer don't seem to pay any attentions at all. FireFox: id (hidden):44px, 146px, 146px, 237px, 266px, 146px IE: id (hidden):44px, 133px, 198px, 198px, 267px, 146px
Has anyone else had this? anyone know any solution to this?