2011-03-12 16 views
5

बनाने के लिए कक्षा जोड़ें, हम एक Django फॉर्म <input..> फ़ील्ड में एक सीएसएस क्लास विशेषता जोड़ने का समाधान ढूंढ रहे हैं। हमने सलाह देखी है जो बताती है कि हम <div>http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template में फ़ील्ड को लपेटते हैं, लेकिन यह सलाह मुख्य रूप से फ़ील्ड लेबल पर लागू होती है, न कि यह <input ...> है।Django <input ..> फ़ील्ड

यदि आप <input> फ़ील्ड के आसपास सीमा बनाने की कोशिश कर रहे हैं तो यह विशेष सलाह काम नहीं करती है। उस स्थिति में, <div> बाउंडिंग बॉक्स पर लागू होगा, न कि वास्तविक इनपुट फ़ील्ड। उदाहरण के लिए .wrapper { border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} डिफ़ॉल्ट <input ...> सीमा को प्रतिस्थापित करने के बजाय, फ़ील्ड के आस-पास एक बॉक्स बनाएगा।

हम फॉर्म क्लास पर लागू विजेट के माध्यम से कक्षा को लागू करने के लिए वापस आ गए हैं, लेकिन इसमें कुछ निश्चित मात्रा में कोड लालित्य (और DRY का उल्लंघन) की कमी है। उदाहरण के लिए, यह आवश्यकता हल करता है।

class ContactUsForm(forms.Form): 
    name = forms.CharField(widget=forms.TextInput(attrs={'class':'form_text'})) 

लेकिन निश्चित रूप से, यह फ़ॉर्म को सीएसएस के लिए बहुत कसकर जोड़ता है। और अगर आप क्लास एट्रिब्यूट्स को <input ..> फ़ील्ड पर लागू करने की कोशिश कर रहे हैं तो यह और भी जटिल हो जाता है यदि फॉर्म शांत नए रूपों के बजाय आधारित है। मॉडलफॉर्म सिस्टम।

हमने इस मुद्दे (और Django स्रोत कोड का अध्ययन) के साथ खेलने के दो दिन का बेहतर हिस्सा बिताया है, और ऐसा लगता है कि हम इस विशेष मुद्दे के लिए Django के सबसे दूर किनारों तक पहुंच सकते हैं - लेकिन हम बस चाहते थे StackOverflow पर एक पास ले जाने के लिए यह देखने के लिए कि किसी और के पास अंतर्दृष्टि है या नहीं।

किसी भी अंतर्दृष्टि के लिए धन्यवाद।

एक अंतिम टिप्पणी: अगर समस्या हमारी समझ सीएसएस (डीजेंगो की बजाय) है तो हमें सीधे इस पर सेट करने के लिए स्वतंत्र महसूस करें। हमने सीएसएस विकल्पों के साथ काफी समय बिताया है, लेकिन उनमें से कोई भी हमें वांछित प्रभाव को पूरा करने की अनुमति नहीं देता है - जो डिफ़ॉल्ट <input...> सीमा को बदल रहा है।

उत्तर

8

आप इस तरह बच्चे का भी उपयोग कर सकता है:

.fieldWrapper > input {border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} 
+0

शानदार समाधान! मैं आमतौर पर ऐतिहासिक संगतता मुद्दों के कारण बाल चयनकर्ताओं के बारे में नहीं सोचता, लेकिन यदि आप आधुनिक ब्राउज़रों को लक्षित करने में कोई फर्क नहीं पड़ता - यह एक गैर-मुद्दा है। महान समाधान के लिए धन्यवाद। – user590028

संबंधित मुद्दे