Simple_Form

Question

के साथ f.collection_check_boxes के लिए चेकबॉक्स को संरेखित करें मैं RoR का उपयोग कर रहा हूं और मैं अपने रूपों के लिए Simple_Form मणि का उपयोग कर रहा हूं। मेरे पास एक ऑब्जेक्ट रिलेशनशिप है जिसके द्वारा उपयोगकर्ता के पास कई भूमिकाएं हो सकती हैं, और सृजन के दौरान, व्यवस्थापक चुन सकता है कि कौन से भूमिका नए उपयोगकर्ता पर लागू हों। मैं चाहता हूं कि भूमिकाएं बाईं ओर अपना चेकबॉक्स रखें, और क्षैतिज व्यवस्था में दाईं ओर उनका नाम।

// "बॉक्स" व्यवस्थापक //

वर्तमान

//

"बॉक्स"

व्यवस्थापक

//

के बजाय

दिखाने के लिए मेरा वर्तमान कोड भूमिका यह है।

<div class="control-group"> 
    <%= f.label 'Roles' %> 
    <div class="controls"> 
     <%= f.collection_check_boxes 
       :role_ids, Role.all, :id, :name %> 
    </div> 
    </div> 

हिस्सा मैं कर रहा हूँ सबसे काट दिया हो रही तथ्य यह है कि इस तरह f.collection_check_boxes कोड उत्पन्न करता है।

<span> 
    <input blah blah /> 
    <label class="collection_check_boxes" blah>blah</label> 
</span> 

जो मेरे लिए एक सीएसएस कक्षा प्राप्त करना मुश्किल बनाता है क्योंकि वहां 3 घटक हैं जिन्हें छुआ जाना है। मैंने डमी क्लास जैसे चीजों को जोड़ने की कोशिश की है: एचटीएमएल हैश, लेकिन डमी क्लास प्रस्तुत एचटीएमएल में भी दिखाई नहीं देती है।

किसी भी मदद की बहुत सराहना कर रहा है

संपादित करें: समाधान

Baldrick के लिए धन्यवाद, मेरे कार्य ERB इस तरह दिखता है।

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, 
     {:item_wrapper_class => 'checkbox_container'} %> 

और मेरे सीएसएस के रूप में इस प्रकार है

.checkbox_container { 
    display: inline-block; 
    vertical-align: -1px; 
    margin: 5px; 
} 
.checkbox_container input { 
    display: inline; 
} 
.checkbox_container .collection_check_boxes{ 
    display: inline; 
    vertical-align: -5px; 
} 

Answer 1

doc of collection_check_boxes के अनुसार, वहाँ एक विकल्प item_wrapper_class चेकबॉक्स युक्त अवधि के लिए एक सीएसएस वर्ग देने के लिए है। कि

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'checkbox_container' %> 

और एक सीएसएस शैली की तरह उपयोग चेकबॉक्स और एक ही लाइन पर लेबल रखने के लिए:

.checkbox_container input { 
    display: inline; 
} 

Answer 2

बूटस्ट्रैप के साथ

आप कर सकते हैं:

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'inline' %> 

Answer 3

नवीनतम 2.1 में बूटस्ट्रैप-सास के 2.3.1.0 के साथ सरलफॉर्म की .0 शाखा, बूटस्ट्रैप विकल्प के साथ स्थापित, collection_check_boxes विधि के परिणामस्वरूप इनलाइन आइटम रैपर वर्ग को लागू करने वाले कुछ स्पैन का कोई अच्छा प्रभाव नहीं पड़ा।

मैं मानक इनपुट, संग्रह,: as =>: check_boxes पद्धति का उपयोग करके पूरी तरह से लाइन अप करने के लिए फॉर्म प्राप्त करने में सक्षम था। फिर इनलाइन शैली पूरी तरह से काम करती है:

<%= f.input :roles, :collection => valid_roles, :label_method => :last, :value_method => :first, :as => :check_boxes, :item_wrapper_class => 'inline' %> 

मेरी भूमिका मूल्य, लेबल के साथ सरणी की एक सरल सरणी होती है। उम्मीद है की यह मदद करेगा।

Answer 4

यह 'डीएलजी खोज' के लिए 'आरएलई संग्रह_चेक_बॉक्स बूटस्ट्रैप' के साथ पहला एसओ पृष्ठ था, लेकिन यह बूटस्ट्रैप के बारे में नहीं है, लेकिन यहां बूटस्ट्रैप 4 के लिए कोई समाधान है।

यह सादा रेल और बूटस्ट्रैप 4 के साथ काम करता है, कोई मणि आवश्यक नहीं है। collection_check_boxes एक सादा रेल विधि है।

.form-group 
    =f.label :industry_interest 
    %br 
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb| 
     =cb.check_box 
     =cb.label 
     %br 

या

.form-group 
    =f.label :industry_interest 
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb| 
     .form-check 
     =cb.label class: 'form-check-label' do 
      =cb.check_box class: 'form-check-input' 
      =cb.text 

वे समान लग रहे हो।

https://v4-alpha.getbootstrap.com/components/forms/#checkboxes-and-radios