尝试将 Simple_form gem 的集合收音机的包装器转换为
元素

发布于 2024-12-07 21:13:36 字数 402 浏览 1 评论 0原文

我正在使用 simple_form gem (https://github.com/plataformatec/simple_form) 来帮助我的应用程序中的表单。但我想显示 li 标签中的许多单选按钮。 Simple_form 现在为每个单选按钮生成 span 包装标签。像这样：

 <%= t.input :arrives_in, :collection => [1,2,3,4], :as => :radio %>
 #=> <span><input type='radio'><label>1</label></span>

有什么方法可以让它将输入和标签部分包装在 li 而不是 span 中？

谢谢你！

原文

I am using the simple_form gem (https://github.com/plataformatec/simple_form) to help out the forms in my app. But I'd like to display the many radio buttons I've got here in li tag. Simple_form now generates span wrapper tag for each radio buttons. Like this:

 <%= t.input :arrives_in, :collection => [1,2,3,4], :as => :radio %>
 #=> <span><input type='radio'><label>1</label></span>

any way I can have it wrap the input and label part in an li instead of span?

Thank YOU!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

古镇旧梦 2024-12-14 21:13:36

您可以将 :item_wrapper_tag 传递给您的输入，如下所示：

<%= t.input :arrives_in, :collection => [1,2,3,4], :as => :radio,
                         :item_wrapper_tag => :li %>

您还可以传递 :collection_wrapper_tag 选项来更改所有无线电输入的包装器，如下所示：

<%= t.input :arrives_in, :collection => [1,2,3,4], :as => :radio,
                         :item_wrapper_tag => :li,
                         :collection_wrapper_tag => :ul %>

You can pass :item_wrapper_tag to you input like this:

<%= t.input :arrives_in, :collection => [1,2,3,4], :as => :radio,
                         :item_wrapper_tag => :li %>

You can also, pass the :collection_wrapper_tag option to change the wrapper of all radio inputs like this:

<%= t.input :arrives_in, :collection => [1,2,3,4], :as => :radio,
                         :item_wrapper_tag => :li,
                         :collection_wrapper_tag => :ul %>

回复收藏 0 原文

如何视而不见 2024-12-14 21:13:36

尝试了接受的答案。它将子弹很好地粘在我的单选按钮前面，但它仍然没有显示内联。我刚刚用 CSS 做到了。我在按钮和标签周围打了一个带有 class="radio-buttons" 的 div 。然后我将其添加到我的样式表（SASS）中：

.radio-buttons {
  margin: .5em 0;
  span input {
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  }
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string { 
    margin-bottom: .5em !important;
  }

  clear: both;
}

.form-block {
  clear: both;
  margin-top: .5em;
}

 .radio-buttons span {
  clear: both;
  display:block;
 }

这将使单选按钮内联在所有框架上，尽管这经过调整以看起来最适合 Zurb Foundation。 ;)

Tried the accepted answer. It stuck bullets in front of my radio buttons fine, but it still didn't display inline. I just did it with CSS. I slapped a div with class="radio-buttons" around the buttons and label. Then I added this to my style sheet (SASS):

.radio-buttons {
  margin: .5em 0;
  span input {
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  }
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string { 
    margin-bottom: .5em !important;
  }

  clear: both;
}

.form-block {
  clear: both;
  margin-top: .5em;
}

 .radio-buttons span {
  clear: both;
  display:block;
 }

This will make the radio buttons inline on ALL frameworks, though this is tweaked to look the best for Zurb Foundation. ;)

回复收藏 0 原文

~没有更多了~