jEdycja wejściowa-box Styl CSS

Question

Próbuję ustawić pole wejściowe renderowane przy użyciu jEditable.

Chcę zmienić kolor komórki tabeli, gdy tekst jest podwójnie kliknięty i można go edytować. Tak:

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

To gdzie jestem w tej chwili: jEditable CSS Problem (kliknij dwukrotnie tekst w tabeli komórek)

kod 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> 

kodu jQuery :

$(function() { 

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

Odpowiadający arkusz 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; 
    } 

Chcę wejście-box odziedziczyć wysokość & szerokość od rodzica table-cell, ale kiedy patrzę na wejściu skrzynki w Firebug to ma wysokość inline CSS & szerokość już ustawiony, powodując komórka tabeli do skalowania po naciśnięciu klawisza td. Próbuję zastąpić wbudowany styl CSS wartością inherit !important, ale to nie działa.

Jest tu pewna koncepcja, której nie do końca zrozumiałem, ale może to być coś zupełnie banalnego.

Jakieś pomysły, co jest nie tak?

Answer 1

jQuery/JavaScript manipuluje DOM i dynamicznie dodaje/ustawia szerokość pól wejściowych za każdym razem, gdy klikniesz dwukrotnie. Ponieważ style wbudowane (tutaj dynamicznie generowane w DOM) mają pierwszeństwo przed wszystkimi innymi stylami, nie można zmieniać dynamicznie renderowanych stylów wbudowanych z nowymi atrybutami w dołączonej klasie. Jeśli chcesz pozbyć się dziwnego efektu skoku, usuń ustawienie atrybutu szerokość całej tabeli w pliku screen.css:

tabela { border-collapse: collapse; /szerokość: 940 pikseli; ... usunąć/ }

Wydaje się, że kod staje się pomylić przy obliczaniu szerokości, aby ustawić pola wejściowego przy użyciu stałej szerokości tabeli (lub być może istnieje gdzieś tam css, który jest „zderzeniu”). Po usunięciu szerokości ze stołu funkcja działa i wygląda dobrze.

Mam nadzieję, że to pomoże, daj mi znać, jeśli nie ...