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?