jEditable input-box CSS style

Question

Estoy intentando diseñar un cuadro de entrada representado usando jEditable.

Quiero cambiar el color de la celda de tabla cuando se hace doble clic en el texto y se puede editar. De esta manera:

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

Aquí es donde estoy en este momento: jEditable CSS Problem (haga doble clic en el texto en las células de mesa)

fragmento HTML:

<tr class="odd"> 
    <td class="dblclick" headers="customer-name">Drogo Shankara</td> 
    <td class="dblclick" headers="mail">dshan@gmail.com</td> 
    <td class="dblclick" headers="type">Web</td> 
    <td class="dblclick" headers="status">Pending mail</td> 
</tr> 

código jQuery :

$(function() { 

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

Correspondiente 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; 
    } 

quiero la entrada de la caja de heredar el ancho altura & de la celda de la tabla de los padres, pero cuando miro a la entrada de la caja en Firebug que tiene una altura en línea CSS & ancho ya establecido, haciendo que el table-cell para escalar cuando se presiona el texto td. Intento anular el CSS en línea con inherit !important, pero no funciona.

Aquí hay algunos conceptos que no he entendido del todo, pero podría ser algo totalmente banal.

¿Alguna idea de qué es lo que está mal?

Answer 1

jQuery/JavaScript está manipulando el DOM y agregando/ajustando dinámicamente los anchos de los campos de entrada cada vez que hace doble clic. Como los estilos en línea (aquí dinámicamente generados en el DOM) tienen prioridad sobre todos los demás estilos, no puede alterar los estilos en línea renderizados dinámicamente con nuevos atributos en la clase adjunta. Si desea deshacerse del extraño efecto de salto, elimine el atributo que establece el ancho de toda la tabla en su archivo screen.css:

tabla { border-collapse: collapse; /ancho: 940px; ... quitar/ }

Parece que el código se confunde al calcular el ancho para establecer el campo de entrada para cuando se utiliza un ancho de mesa fija (o tal vez no es css en algún lugar hay que "chocando"). Cuando eliminé el ancho de la tabla, la funcionalidad funciona y se ve bien.

Espero que esto ayude, avíseme si no ...