jEditable - problem with input-box styling.

Question

First time i try out this service. Looks promising :D

I am trying to style an input-box that is being rendered by the jQuery-plugin jEditable.

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

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>

Here is my jQuery-code:

$(function() {

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

And the 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.

Obviously there is some concept in play here, that I haven't fully understood. I am a Javascript & jQuery n00b so it could be something totally banal.

Any ideas what could be 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...