bootstrap-sass和simple_forms的问题

时间:2013-01-21 16:29:25

标签: ruby ruby-on-rails-3 twitter-bootstrap simple-form

我的应用中有一个错误,但我不知道在哪里看。当我使用simple_form格式重构我的表单时:

<%= simple_form_for([@schedule.doctor, @schedule], :html => { :class => 'form-horizontal'}) do |f| %>

    <%= f.label :start_time %>
    <%= f.text_field :start_time %>
    <%= f.label :day %>
    <%= f.select :day, Date::DAYNAMES.zip((0..6).to_a) %>
    <%= f.label :is_available %>
    <%= f.check_box :is_available %>

    <%= f.submit %>
<% end %>

这是它生成的HTML代码(参见粗体文字)

<form id="new_schedule" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/doctors/1/schedules" accept-charset="UTF-8">
**<div style="margin:0;padding:0;display:inline">**
<label class="time optional control-label" for="schedule_start_time">Start time</label>
<input id="schedule_start_time" class="ui-timepicker-input" type="text" size="30" name="schedule[start_time]" autocomplete="off">
<label class="integer optional control-label" for="schedule_day">Day</label>
<select id="schedule_day" name="schedule[day]">
<label class="boolean optional control-label" for="schedule_is_available">Is available</label>
<input type="hidden" value="0" name="schedule[is_available]">
<input id="schedule_is_available" type="checkbox" value="1" name="schedule[is_available]">
<input type="submit" value="Create Schedule" name="commit">
</form>

知道可能导致此问题的原因是什么?

我正在使用带有simple_forms

的bootstrap-sass

2 个答案:

答案 0 :(得分:0)

解决方案:

我需要在config.default_wrapper = :bootstrap文件中设置simple_form.rb,并确保使用simple_forms tags

答案 1 :(得分:0)

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :input
      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

  config.wrappers :prepend, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div', :class => 'controls' do |input|
      input.wrapper :tag => 'div', :class => 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  :wrap_with => { :tag => 'span', :class => 'help-block' }
      input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    end
  end

  config.wrappers :append, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div', :class => 'controls' do |input|
      input.wrapper :tag => 'div', :class => 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  :wrap_with => { :tag => 'span', :class => 'help-block' }
      input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    end
  end

  # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
  # Check the Bootstrap docs (http://twitter.github.com/bootstrap)
  # to learn about the different styles for forms and inputs,
  # buttons and other elements.
  config.default_wrapper = :bootstrap
end