Fixed columns allignments not proper.
Fixed columns allignments not proper.
I am using FixedColumns plugin to fix first column of my datatable. I have created all the files in my local system to implement fixed column.
When I double click on the html file I created, an yellow bar appears at the top of the browser asking to allow some activex control. If I allow it, page loads. I saw Fixed column working properly. All allignments are perfect.
I copied all the scripts and html to network drive. Now if I open the same html file, activex yellow bar wont appear and I saw cell height in the fixed column does not match with other columns. Cell height till first 10 rows looks good. However after that each row will have a slight difference between fixed column and other columns. If I scroll down to the final row, it will have some good difference in height.
Any ideas on this?
Thanks and Regards,
Ravi manjunatha.
When I double click on the html file I created, an yellow bar appears at the top of the browser asking to allow some activex control. If I allow it, page loads. I saw Fixed column working properly. All allignments are perfect.
I copied all the scripts and html to network drive. Now if I open the same html file, activex yellow bar wont appear and I saw cell height in the fixed column does not match with other columns. Cell height till first 10 rows looks good. However after that each row will have a slight difference between fixed column and other columns. If I scroll down to the final row, it will have some good difference in height.
Any ideas on this?
Thanks and Regards,
Ravi manjunatha.
This discussion has been closed.
Replies
Allan
---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-\strict.dtd">
<?xml version="1.0" encoding="UTF-8" ?>
----------------------------------------------------------
table_logic.js
----------------------------------------------------------
function RenderTable(){
var headerHTML = "";
headerHTML += "";
headerHTML += "";
headerHTML +="";
$("body").append(headerHTML);
$("#pageWrapper").css("width",($(window).width() - 360));
var patientWorklistTable = $('#patientWorklistTable').dataTable({"aoColumns": [
{ "sTitle": "Column0" ,"sWidth": "200px", "sClass": "aoCell"},
{ "sTitle": "Column1" ,"sWidth": "200px", "sClass": "aoCell"},
{ "sTitle": "Column2","sWidth": "200px" , "sClass": "aoCell"},
{ "sTitle": "Column3","sWidth": "230px", "sClass": "aoCell"},
{ "sTitle": "Column4","sWidth": "230px", "sClass": "aoCell"},
{ "sTitle": "Column5","sWidth": "230px", "sClass": "aoCell"},
{ "sTitle": "Column6","sWidth": "200px", "sClass": "aoCell"}
],
"sScrollY": ($(window).height() - 63),
"sScrollX": "100%",
"sScrollXInner": "1490px",
"bSort": false,
"bAutoWidth": false
});
oFC = new FixedColumns( patientWorklistTable, {
"iLeftWidth": 200
} );
var dataAr = [];
for(var i=0;i<=285;i++) {
var html = [];
html.push("");
html.push("ABCDEFFFF");
html.push("DOB: 12");
html.push("Sex: male");
html.push("MRN: 1234");
html.push("");
var htmlLoad = "";
dataAr.push([html.join(""),htmlLoad,htmlLoad,htmlLoad,htmlLoad,htmlLoad,htmlLoad]);
}
$('#patientWorklistTable').dataTable().fnAddData( dataAr );
}
--------------------------------------------------------
table_styles.css
--------------------------------------------------------
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; vertical-align:baseline;overflow:hidden;}
:focus {outline:0;}
html{background-color:#FDFDFD;}
body {color:#000; background:#FFF; font:normal 13px/1.5em Tahoma, sans-serif; text-align:left; width:100%;}
ol, ul {list-style:none; text-align:left;}
table {border-collapse:separate; border-spacing:0; font:normal 13px Tahoma, sans-serif;}
caption {display:none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
script {display:none;}
input {padding:0; margin:0;}
#patientWorklistTable_wrapper td.aoCell{padding:0;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #EDEDED;}
#patientWorklistTable_wrapper thead tr{background-color:#F6F6F6;height:22px;}
#patientWorklistTable_wrapper thead th{color:#A0A0A0;font:11px Tahoma,sans-serif;font-weight:bold;/* border-right:1px solid EDEDED; */}
#patientWorklistTable_wrapper thead th:hover{background-color:#EDEDED;cursor:default;}
.worklistContentDiv{overflow:hidden;/* width:100%;max-width:200px; */white-space:nowrap;text-overflow:ellipsis;min-height:100%;min-width:100%}
.smallLoadingSpan{padding-top:40%;padding-left:40%;height:20%;width:20%;background:url("../images/6439_16.gif");background-position:center;background-repeat:no-repeat;}
.contentCell{height:80px;}
.col1 .worklistContentDiv{border-right:none;line-height:30px;}
.col1 a{font:13px Tahoma,sans-serif; font-weight:bold; color:#193F72; text-decoration:none; border:none;padding:2px 4px;}
.col1 .subDiv{padding-left:8px;margin-bottom:-1px;}
.col1 .typeSpan{color:#888;font:12px Tahoma,sans-serif;line-height:20px;}
.col1 .dataSpan{color:#111;font:12px Tahoma,sans-serif;line-height:20px;}