जेडटेबल इनपुट-बॉक्स सीएसएस शैली

Question

मैं jEditable का उपयोग करके प्रदान किए गए इनपुट-बॉक्स को स्टाइल करने की कोशिश कर रहा हूं।

जब टेक्स्ट डबल-क्लिक किया जाता है और संपादन योग्य होता है तो मैं टेबल-सेल का रंग बदलना चाहता हूं। इस तरह:

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

यह वह जगह है जहाँ मैं पल में हूँ: jEditable CSS Problem (डबल क्लिक करें टेबल कोशिकाओं में पाठ)

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' 
    }); 
}); 

अनुरूप सीएसएस:

.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 में इनपुट बॉक्स को देखो यह एक इनलाइन सीएसएस ऊंचाई & चौड़ाई पहले से ही सेट है के कारण टेबल-सेल स्केल करने के लिए जब td टेक्स्ट दबाया जाता है। मैं inherit !important के साथ इनलाइन सीएसएस को ओवरराइड करने का प्रयास करता हूं, लेकिन यह काम नहीं करता है।

यहां कुछ अवधारणा है जिसमें मैंने पूरी तरह से समझ नहीं लिया है, लेकिन यह पूरी तरह से कुछ भी हो सकता है।

कोई विचार गलत क्या है?

Answer 1

jQuery/जावास्क्रिप्ट डीओएम में हेरफेर कर रहा है और प्रत्येक बार जब आप डबलक्लिक करते हैं तो इनपुट फ़ील्ड की चौड़ाई को गतिशील रूप से जोड़/सेट कर रहा है। चूंकि इनलाइन शैलियों (यहां डीओएम में गतिशील रूप से जेनरेट की गई) सभी अन्य शैलियों पर प्राथमिकता लेते हैं, इसलिए आप संलग्न कक्षा में नए विशेषताओं के साथ गतिशील रूप से प्रस्तुत इनलाइन शैलियों को बदल नहीं सकते हैं। यदि आप अजीब कूद प्रभाव से छुटकारा पाने के लिए चाहते हैं, तो अपनी स्क्रीन.css फ़ाइल में संपूर्ण तालिका की चौड़ाई को सेट करने वाली विशेषता को हटा दें:

तालिका { सीमा-पतन: पतन; /चौड़ाई: 940 पीएक्स; ... को दूर/ }

ऐसा नहीं है कि कोड जब जब एक निश्चित तालिका चौड़ाई का उपयोग कर (या शायद वहाँ सीएसएस कहीं है कि वहाँ है "टकरा") के लिए इनपुट क्षेत्र स्थापित करने के लिए चौड़ाई की गणना उलझन में हो जाता है लगता है। जब मैंने तालिका से चौड़ाई हटा दी, तो कार्यक्षमता काम करती है और ठीक दिखती है।

उम्मीद है कि यह मदद करता है, मुझे बताएं कि यह नहीं है ...