jEditable input-box CSS style

Question

I am trying to style an input-box rendered using jEditable.

I want to change the color of the table-cell when the text is double-clicked and made editable. Like this:

alt text http://www.hongaijitsu.com/temp/foobar/public/Picture-2.png

This is where I am at the moment: jEditable CSS Problem (double-click the text in the table-cells)

HTML snippet:

<tr class="odd">
    <td class="dblclick" headers="customer-name">Drogo Shankara</td>
    <td class="dblclick" headers="mail">[email protected]</td>
    <td class="dblclick" headers="type">Web</td>
    <td class="dblclick" headers="status">Pending mail</td>
</tr>  

jQuery code:

$(function() {

$(".dblclick").editable("#", { 
    tooltip   : "Doubleclick to edit...",
    event     : "dblclick",
    css : 'inherit'
    });
});

Corresponding CSS:

.dblclick form {
    height: inherit !important;
    width: inherit !important;
    border: 0;  
    margin: 0;
    padding: 0;
    background: red;
    }

.dblclick input {
    height: inherit !important;
    width: inherit !important;
    border: 0;  
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    }

I want the input-box to inherit the height & width from the parent table-cell, but when I look at the input-box in Firebug it has an inline CSS height & width already set, causing the table-cell to scale when the td text is pressed. I try to override the inline CSS with inherit !important, but it doesn't work.

There is some concept in play here that I haven't fully understood, but it could be something totally banal.

Any ideas what is wrong?

Answer 1

jQuery/JavaScript is manipulating the DOM and dynamically adding/setting the widths of the input fields each time you doubleclick. Since inline styles (here dynamically generated in the DOM) take precedence over all other styles, you can not alter dynamically rendered inline styles with new attributes in the attached class. If you would like to get rid of the strange jumping effect, remove the attribute setting the width of the entire table in your screen.css file:

table { border-collapse: collapse; /width: 940px; ...remove/ }

It seems that the code gets confused when calculating the width to set the input field to when using a fixed table width (or maybe there is css somewhere there that is "clashing"). When I removed the width from the table, the functionality works and looks ok.

Hope this helps, let me know if it doesn't...