रेल फॉर्म में एक ही पंक्ति पर चेकबॉक्स और लेबल कैसे रखें?

Question

एक पंक्ति में एक चेकबॉक्स में चेकबॉक्स के साथ एक ही बॉक्स पर चेकबॉक्स के लेबल को रखने के लिए मुझे क्या करना चाहिए?

वर्तमान में लेबल अगली पंक्ति पर चला जाता है:

<div class="span6 offset3"> 
<%= form_for(@user) do |f| %> 
<%= render 'shared/error_messages', object: f.object %> 

    <%= f.label :name %> 
    <%= f.text_field :name %> 

    <br> 
    <%= f.check_box :terms_of_service %> 
    <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe %> 
    <br><br> 

    <%= f.submit "Create my account", :class => "btn btn-large btn-primary" %> 
<% end %> 

धन्यवाद, एलेक्जेंड्रा

Answer 1

ऐसा लगता है कि आप बूटस्ट्रैप का उपयोग कर रहे हैं, इसलिए मैं अपने दृश्य को कोड अनुकूल करने की सलाह देते बूटस्ट्रैप दस्तावेज़ों के इस खंड में वर्णित क्षैतिज रूप लेआउट का उपयोग करें: http://getbootstrap.com/css/#forms

Answer 2

मेरे पास एक सिमिल था अन्य दिन ar समस्या, ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूँ, लेकिन मैं simple_form मणि का भी उपयोग कर रहा हूँ। मैं, सीएसएस के माध्यम से है कि विस्तार को ठीक करने के लिए किया था यहाँ मेरी कोड है:

<%=f.input :status, :label => "Disponible?", :as => :boolean, :label_html => { :class => "pull-left dispo" }%> 

सीएसएस:

.dispo{ 
    margin-right:10%; 
} 
pull-left{ 
    float:left; 
} 

Answer 3

<br> 
    <%= f.check_box :terms_of_service, :style => "float:left;" %> 
    <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe, :style => "float:left;" %> 
    <br> 

Answer 4

आप bootstrap उपयोग करते हैं? f.submit में :class => "span1" जोड़ने का आसान तरीका है। मुझे यकीन है कि यह काम किया!

Answer 5

bootstrap wiki के अनुसार, यह होना चाहिए

<label class="checkbox"> 
    <input type="checkbox"> Check me out 
</label> 

जो रूबी ऑन रेल्स में

<%= f.label :terms_of_service do %> 
    <%= f.check_box :terms_of_service %> 
    I agree to the <%= link_to 'Terms of Service', policies_path %>. 
<% end %> 

Answer 6

जवाब पर टिप्पणी सही है, लेकिन इसके बारे में आदेश के बारे में समझ के कुछ अति सूक्ष्म अंतर मान लिया गया है तत्वों।

सही जवाब इस प्रकार है:

<%= f.check_box :terms_of_service %> 
<%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe 
          , {class: "checkbox inline"} %> 

दो बातें जरूरी हैं:

1. लेबल तत्व
2. चेकबॉक्स तत्व लेबल तत्व से पहले हो गया है पर वर्ग।

यह स्पष्ट है कि एक बार जब आप इसे काम देखते हैं, लेकिन फॉर्म के लिए अन्य सभी नमूने हमेशा लेबल के बाद इनपुट होते हैं और आपको इसे चेकबॉक्स के लिए बदलने की आवश्यकता होती है।

Answer 7

i18n label के उपयोग के लिए, आप t उपयोग कर सकते हैं:

<%= f.label :my_field do %> 
    <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %> 
<% end %> 

Answer 8

<div class="form-inline"> 
    <%= f.check_box :subscribed, class: 'form-control' %> 
    <%= f.label :subscribed, "Subscribe" %> 
    </div> 

Answer 9

मैं शुद्ध सीएसएस/HTML का उपयोग करें और यह सीएसएस मेरे लिए अच्छा काम करता है।

input { 
    float:left; 
    width:auto; 
} 
label{ 
    display:inline; 
} 

Answer 10

बुनियादी रेल टैग के लिए:

<%= label_tag('retry-all') do %> 
    Retry All 
    <= check_box_tag("retry-all",false) %> 
<% end %> 

Answer 11

मैं लेबल के भीतर चेक बॉक्स लपेटो जाएगा।

<%= f.label :terms_of_service do %> 
    <%= f.check_box :terms_of_service %> 
    I agree to the <%= link_to 'Terms of Service', policies_path %> 
    <% end %> 

जब इनपुट फ़ील्ड इसके लेबल द्वारा लपेटा जाता है, तो आपको वास्तव में लेबल पर विशेषता के लिए आवश्यकता नहीं होती है। लेबल बिना क्लिक के चेक बॉक्स को सक्रिय करेगा। तो और भी आसान:

<label> 
    <%= f.check_box :terms_of_service %> 
    <%= User.human_attribute_name(:terms_of_service) %> 
</label> 

Answer 12

बूटस्ट्रैप 4 के लिए, Haml

में

.form-check 
    =f.label :decision_maker, class: 'form-check-label' do 
     =f.check_box :decision_maker, class: 'form-check-input' 
     Decision Maker 

:

<label> 
    <%= f.check_box :terms_of_service %> 
    I agree to the <%= link_to 'Terms of Service', policies_path %> 
    </label> 

सामान्य रूप से रेल के लिए

, यह (human_attribute_name i18n साथ काम करता है) के बारे में जाने के लिए एक तरीका हो सकता है

या

.form-group 
    =f.check_box :decision_maker 
    =f.label :decision_maker 

https://v4-alpha.getbootstrap.com/components/forms/#default-stacked

<div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great </label> </div>

पहला तरीका अधिक सही तरीका है, लेकिन दूसरा रास्ता लगभग समान और ड्रायर लग रहा है।