Edited cell of grid shrinks to half the size.. IE7 and Firefox

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Set up dataTable using default settings
2. Import the following css and scripts:

--css
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
@import "css/themes/base/jquery-ui.css";
@import "css/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>

--scripts
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/jquery.jeditable.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.editable.js" type="text/javascript"></script>

3. Double click on editable cell

What is the expected output?
-Cell is fully editable (size same)

What do you see instead?
Cell shrinks in size, half of height

What version of the product are you using? On what operating system?
Current version, from download:
JQuery-DataTables-Editable.example.1.0.0.zip, Win XP ,SP3

Please provide any additional information below.
Seems like a configuration issue on my end, may be missing style/library?
See attached screenshot, seen in IE7 and Firefox environments.  Deploying to 
local Tomcat using Eclipse.

Original issue reported on code.google.com by scottdam...@gmail.com on 18 Apr 2011 at 11:34

Attachments:

• EditTable_Configuration.docx

[GoogleCodeExporter]

Hi,
Could you please send me HTML example is possible? I never saw that height is 
reduced.
However there is a bug with some integration of jEditable and DataTables. I saw 
that on the 
http://www.datatables.net/beta/1.8/examples/server_side/editable.html when you 
are clicking on the cells in the same column width is increased by 5px.

There is a bug in editing and I think that jeditable causes this. I have found 
what could be a problem and I reported this to jeditable forum (see 
http://www.appelsiini.net/projects/jeditable comments left by jocapc) but I 
didn't get an answer so I'm not sure whether the change I proposed in the forum 
could resolve the issue.
Could you also attach your example so I can see in what case height is 
decreased?
As a quick fix you can set explicitely width and height of each editor if you 
pass width and height properties in the configuration of column editors.

Thanks,
Jovan

Original comment by joc...@gmail.com on 4 May 2011 at 5:11

• Changed state: Accepted

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Could you post some code that explicitly sets the width and height of the 
editors?  I am running into the same problem where the edit box winds up being 
half-height.  Oddly enough, this is not occurring  in another page where I am 
using the editable plugin.  I can send you samples, if you like.  Thanks.

Original comment by wse...@gmail.com on 5 May 2011 at 7:25

[GoogleCodeExporter]

You can see example of setting editor width in the 
http://jquery-datatables-editable.googlecode.com/svn/trunk/fixed-width.html 
page. Width is 100px on each editor but you cna place any other value is you 
want.
Could you please send me your code so I cna examine it but I'm sure that it is 
same issue with JEditable as in the online examples I have.

Thanks,
Jovan

Original comment by joc...@gmail.com on 5 May 2011 at 10:34

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I got a workaround to work.  I set the (row) height to 100% in my tables:

$(document).ready( function() 
{
    var baseURL = "/Contract/AJAXServlet";

    $("input.dateField").datepicker();
    $("#contractTabs").tabs();
    $("#contractTable").dataTable().makeEditable(
            {
                sUpdateURL: baseURL + "?cmd=cmdUpdateContractRow",
                sDeleteURL: baseURL + "?cmd=cmdDeleteContractRow",
                height: "100%"
            });
    $("#invoiceTable").dataTable().makeEditable(
            {
                sUpdateURL: baseURL + "?cmd=cmdUpdateInvoiceRow",
                sDeleteURL: baseURL + "?cmd=cmdDeleteInvoiceRow",
                height: "100%"          
            });

});

This is better than setting the height to 24px,  which is what I was doing 
before.

Original comment by wse...@gmail.com on 6 May 2011 at 6:07

[GoogleCodeExporter]

Here is a file that exemplifies the box resizing problem.  Workaround is 
commented out.

Original comment by wse...@gmail.com on 6 May 2011 at 8:22

Attachments:

• editable.html

[GoogleCodeExporter]

Hi Jovan,

Thanks for your reply.. Do you still need that code?  I will need to
round up some of my examples, as I was testing the libraries and just
running through some quick tests.

I will need to find the exact configuration I was using if you do..

-Scott

On Thu, May 5, 2011 at 12:25 PM,
<jquery-datatables-editable@googlecode.com> wrote:

Original comment by scottdam...@gmail.com on 7 May 2011 at 2:51

[GoogleCodeExporter]

Hi Scott,

Thanks for your code. I think that your solution with setting height to 100% 
resolved a problem. In the latest version of the plugin 1.1.6. I have set that 
by default width and height are set to 100% in all cell editors and it seems 
that resizing issue is gone. In all online examples there is no resizing so I 
assume that it will be fixed in your code too.
Could you please take verison 1.1.6. and check in your code is the resizing 
issue gone without explicit setting the height? You have attached just HTML 
without some CSS files so I cannot be sure that this resolved problem in your 
page but when I have replaced your version of jquery-datatables-editable with 
the lates one height is not changed anymore.

If the version 1.1.6. has resolved problem in your code without patch, could 
you confirm this so I can close this issue?

Thanks,
Jovan

Original comment by joc...@gmail.com on 9 May 2011 at 8:40

[GoogleCodeExporter]

This problem is resolved in the latest version of plugin. I'm closing it.

Original comment by joc...@gmail.com on 20 May 2011 at 1:56

• Changed state: Fixed