Strang behaviour: column resizes on click (jeditable)
Strang behaviour: column resizes on click (jeditable)
Hello Guys,
I am using DataTables togehter with jeditable in client side mode. The relevant part of my Javascript code looks like:
[code]
buildTable = function(columns, data){
var submitFunc = function(v, s) {
return v;
}
var tab = $(this.div).dataTable({
"bSort": false, //disable sorting
"bPaginate": false, //disable "show x entries"
"bFilter": false, //remove search bar
"bInfo": false, //remove "showing - info"
"bDestroy": true,
"aaData": data,
"aoColumns": columns
});
$(tab).find('td.editable').editable(submitFunc, {
"event": "click",
"style": "inherit",
"callback": function(value, y) {
var changed = tab.fnGetPosition(this);
var row = tab.fnGetData(changed[0]);
//update changed value in table
tab.fnUpdate(value, row[0], row[1]);
},
"width": "100%"
});
}[/code]
The buildTable function is called in an Python program, with the parameters "columns" and "data", which are both in the JSON format. I already checked them with JSONLint - they are both valid JSON strings.
My Problem is, that the column resizes, if I click in a field to edit it. Here is a video to show you, what's going on:
http://www.youtube.com/watch?v=D9rmtbUz15c&feature=youtu.be
Does anybody of you have an idea what's the cause of this problem?
I am using DataTables togehter with jeditable in client side mode. The relevant part of my Javascript code looks like:
[code]
buildTable = function(columns, data){
var submitFunc = function(v, s) {
return v;
}
var tab = $(this.div).dataTable({
"bSort": false, //disable sorting
"bPaginate": false, //disable "show x entries"
"bFilter": false, //remove search bar
"bInfo": false, //remove "showing - info"
"bDestroy": true,
"aaData": data,
"aoColumns": columns
});
$(tab).find('td.editable').editable(submitFunc, {
"event": "click",
"style": "inherit",
"callback": function(value, y) {
var changed = tab.fnGetPosition(this);
var row = tab.fnGetData(changed[0]);
//update changed value in table
tab.fnUpdate(value, row[0], row[1]);
},
"width": "100%"
});
}[/code]
The buildTable function is called in an Python program, with the parameters "columns" and "data", which are both in the JSON format. I already checked them with JSONLint - they are both valid JSON strings.
My Problem is, that the column resizes, if I click in a field to edit it. Here is a video to show you, what's going on:
http://www.youtube.com/watch?v=D9rmtbUz15c&feature=youtu.be
Does anybody of you have an idea what's the cause of this problem?
This discussion has been closed.
Replies
After I removed this line from my HTML file, it worked:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">[/code]
I am more a Python programmer, than a Javascript/HTML guy, so I don't really know what this line does and why it causes trouble. (if I'm honest, I also don't really care ;-))
I don't like Javascript very much, but DataTables together with a Bootstrap stylesheet produces REALLY nice tables, so I took the pain and made a crash course in Javascript. ;)