How to stop row height changing when JEditable is used on a JQuery Data Table

Question

I'm having an issue with JEditable on a JQuery data table, such that when a field is clicked on to enable the JEditable text box, the row height that contains the box changes even though there is plenty of room for it which is quite undesirable.

There also seems to be some padding in the text box that I cannot remove which pushes any text below the visible range of the text box as shown below...

The code is as follows...

.js

$(document).ready(function () {
    var oTable = $('#spellTable0').dataTable({
        "sScrollY": "650px",
        "bPaginate": false,
        "bScrollCollapse": true,
        "bAutoWidth": true,
        "bSort": false
     })

     oTable.$('.SpellNoCol-Edit').editable('test.php', {

        "callback": function (sValue, y) {
            var aPos = oTable.fnGetPosition(this);
            oTable.fnUpdate(sValue, aPos[0], aPos[1]);
        },
        "submitdata": function (value, settings) {
            return {
                "row_id": this.parentNode.getAttribute('PatientID'),
                "column": oTable.fnGetPosition(this)[2]
            };
        },

        "height": "24px",
        "width": "100%"

     });

     $(window).on('resize', function () {
         oTable.fnAdjustColumnSizing();
     });

Table definition and Row definitions

<table id="spellTable0" class="table table-condensed" style="border:none">
<tr class="SpellWarningRow; DropDownChild" style="border-collapse:collapse;background-color:khaki">
<tr class="SpellRow; DropDownChild" id="duplicateRow" style="border-collapse:collapse;background-color:oldlace>

Are there any parameters that I am unaware of to stop this happing?

Answer 1

Found the solution, it seems that JEditable always adds a little extra when its active and unfortunately that cannot be avoided completely. However the majority of the issue was with a checkbox that was adding height to the row, making that smaller fixed the size jumping issue.

It was also possible to manually set the width and height through the intialisation code.

$('.colClass1').editable('', {
    event: "click",
    "style": "inherit",
    "width": ($('.colClass1').width()-15) + "px",
    "height": ($('.colClass1').height() + 8) + "px",
    "callback": function (sValue, y) {
        var aPos = oTable.fnGetPosition(this);
        oTable.fnUpdate(sValue, aPos[0], aPos[1]);
    },
    "submitdata": function (value, settings) {
        return {
            "row_id": this.parentNode.getAttribute('AttributeX'),
            "column": oTable.fnGetPosition(this)[2]
        };
    },
    "cssclass": "~/Content/themes/header-table/editable.css",
});