jEditable CSS-стиль для поля ввода

Question

Я пытаюсь оформить поле ввода с помощью jEditable .

Я хочу изменить цвет ячейки таблицы, когда текст дважды щелкается и становится редактируемым. Как это:

альтернативный текст http://www.hongaijitsu.com/temp/foobar/public/Picture-2.png

Вот где я сейчас нахожусь: jEditable Проблема CSS (дважды щелкните текст в ячейках таблицы)

Фрагмент 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>  

JQuery код:

$(function() {

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

Соответствующий 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;
    }

Я хочу, чтобы поле ввода наследовало высоту и ширину от родительской ячейки таблицы, но когда я смотрю на поле ввода в Firebug, оно уже имеет встроенную высоту и ширину CSS, в результате чего ячейка таблицы масштабировать при нажатии на текст td. Я пытаюсь переопределить встроенный CSS с помощью inherit !important, но это не работает.

Здесь есть какая-то концепция, которую я не до конца понял, но это может быть что-то совершенно банальное.

Есть идеи, что не так?

Answer 1

jQuery / JavaScript манипулирует DOM и динамически добавляет / устанавливает ширину полей ввода каждый раз, когда вы дважды щелкаете мышью. Поскольку встроенные стили (здесь динамически генерируемые в DOM) имеют приоритет над всеми другими стилями, вы не можете изменять динамически отображаемые встроенные стили с новыми атрибутами в присоединенном классе. Если вы хотите избавиться от странного эффекта прыжка, удалите атрибут, задающий ширину всей таблицы в вашем файле screen.css:

таблица { коллапс границы: коллапс; / ширина: 940 пикселей; ... удалить / }

Кажется, что код запутывается при вычислении ширины для установки поля ввода при использовании фиксированной ширины таблицы (или, может быть, где-то там есть css, который "конфликтует"). Когда я убрал ширину из таблицы, функционал работает и выглядит нормально.

Надеюсь, это поможет, дайте мне знать, если это не так ...