f.date_select बॉक्स का छोटा आकार

Question

मैं ट्विटर बूस्ट्रैप के साथ रेल के 'f_date_select' का उपयोग कर रहा हूं, जिसके परिणामस्वरूप नीचे दिखेगा। हालांकि, मैं चुनिंदा बक्से को स्मालर (आधा आकार) होना चाहता हूं।

मैं यह कैसे कर सकता हूं?

<%= f.label :start_date, :class => "control-label"%> 
<%= f.date_select :start_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' } %> 
<%= f.label :end_date, :class => "control-label"%> 
<%= f.date_select :end_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' } %> 

Answer 1

वे बूटस्ट्रैप में चुनिंदा तत्व से चौड़ाई हो रही है:

select { 
    width: 220px; 
    border: 1px solid #cccccc; 
    background-color: #ffffff; 
} 

ठीक करने के लिए, ओवरराइड के तल पर अपने खुद के जोड़ने के लिए फ़ाइल:

select.date-select { 
    width:auto; 
    border: 1px solid #cccccc; 
    background-color: #ffffff; 
} 

अगले समस्या आवेदन कर रहा है कक्षा_ date_select तत्वों के लिए वर्ग। यदि आप बस फेंकते हैं: वर्ग => "दिनांक-चयन" वहां, रेल यह नहीं पहचानते कि आप दोनों विकल्पों और html_options का उपयोग करने का प्रयास कर रहे हैं। इसके बजाय, आप एक हैश के रूप में प्रत्येक पारित करने के लिए है:

<%= f.date_select :start_date, {:prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }}, {:class => 'date-select'} %> 

यह अपनी कक्षा की तारीख का चयन तीन का चयन उत्पन्न वस्तुओं में से प्रत्येक के लिए लागू होगी।

Answer 2

स्मृति से, का चयन करें बॉक्स स्टाइल एक बुरा सपना के बाद से वे और अधिक ब्राउज़र घटकों की तरह कर रहे हैं कर रहे हैं (यानी, वे स्टाइल की परवाह किए बिना विभिन्न ब्राउज़र में विभिन्न प्रस्तुत करना)।

चूंकि आप बूटस्ट्रैप का उपयोग कर रहे हैं, हालांकि आप their jQuery dropdown component और जितनी चाहें उतनी शैली का उपयोग कर सकते हैं।

आपको अपने रेल कोड को समायोजित करने के लिए समायोजित करना होगा।