css - simple_form_for rails 内联单选按钮

标签 css ruby-on-rails forms twitter-bootstrap simple-form

我试图让我的按钮以内联方式显示,并且还有一个默认值,因为它不能为空。我正在使用 plataformatex/simple_form 和 bootstrap。

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true

它正在渲染这个:

<span>
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>    
</span>
<span>
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

很明显 style: 没有正常工作,但我不确定什么可以工作。

根据我添加的另一个建议

.radio_buttons { display:inline; }

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true

得到:

<span class="radio_buttons">
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

请注意,默认值仍然无效。

最佳答案

如果你想让它们内联,你需要通过以下方式为标签提供内联类::item_wrapper_class => 'inline'

这是一个使用您的代码的示例:

= f.input :is_private, 
          :collection => [[true, 'Private'], [false, 'Public']], 
          :label_method => :last, 
          :value_method => :first,
          :as => :radio_buttons, 
          :item_wrapper_class => 'inline',
          :checked => true

编辑: 我刚刚意识到我的答案更具体到 simple_form + bootstrap,因为在给标签的内联类时 bootstrap 已经定义了样式。不过,您应该能够使用我的示例,只是您在创建自定义 CSS 时需要做更多的工作。

关于css - simple_form_for rails 内联单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9985317/

相关文章:

Jquery 聊天框 - 在 DIV 底部向上显示第一条消息

javascript - 将 CSS 添加到 iframe 页面?

javascript - 如何用边框半径显示焦点的效果..我试过了。我想让它缩小

javascript - 如何根据表单输入添加动态复选框?

ruby-on-rails - 535-5.7.8 用户名和密码不被接受错误

Javascript 表单更新 Onclick

javascript - 使用 Jquery 将表单字段的值附加到表单操作?

javascript - onsubmit 函数未定义

javascript - 使 JQuery UI 工具提示持续存在,直到用户将注意力集中在输入字段上

ruby-on-rails - 无法在任何来源中找到 json-1.8.3 (Bundler::GemNotFound)