search

manuelvanrijn / bootstrap-switch-rails

A small gem for putting bootstrap-switch into the Rails asset pipeline
MIT License
58 stars 18 forks source link

generated html is incorrect( using on/off I18n translated texts) #16

Closed ghost closed 8 years ago

ghost commented 8 years ago

I am trying to use the gem with Rails 4 this way

<div class="col-sm-9">
    <%= f.check_box :allow_read, :data => { :size=>'medium', 'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}", 'off-text'=> "#{t('no').upcase}" } %>
</div>

The generated HTML is weird , the OFF text is displayed on the left side of the switch with translated on/off texts ..

<div class="col-sm-9">

  <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off bootstrap-switch-medium bootstrap-switch-animate">
    <div class="bootstrap-switch-container">
      <span class="bootstrap-switch-handle-on bootstrap-switch-success">ON</span>
      <label class="bootstrap-switch-label">&nbsp;</label>
      <span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span>
      <input name="permission[allow_read]" type="hidden" value="0">
    </div>
  </div>

  <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-medium bootstrap-switch-animate bootstrap-switch-id-permission_allow_read">
    <div class="bootstrap-switch-container">
      <span class="bootstrap-switch-handle-on bootstrap-switch-success">OUI</span>
      <label class="bootstrap-switch-label">&nbsp;</label>
      <span class="bootstrap-switch-handle-off bootstrap-switch-default">NON</span>
      <input data-size="medium" data-on-color="success" data-on-text="OUI" data-off-text="NON" type="checkbox" value="1" checked="checked" name="permission[allow_read]" id="permission_allow_read">
    </div>
  </div>

</div>

screen shot 2015-11-19 at 18 34 19

ghost commented 8 years ago

there is something wrong using the f.checkbox generated html...
I change it to standard html ... and it works perfectly 

            <div class="row">
              <div class="col-sm-12">
                <div class="form-group">
                  <p  class='col-sm-3 control-label' >READ</p>
                  <div class="col-sm-9">
                    <input id="allow_read" name="permission[allow_read]" type="checkbox" value="1"  data-size ='medium', data-on-color ='success' data-on-text = "YES" data-off-text = "NO" />
                  </div>
                </div>
              </div>
            </div>