开发者

Trying to turn Simple_form gem's collection radio's wrapper into <li> element

开发者 https://www.devze.com 2023-04-10 04:48 出处:网络
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

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!


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 %>


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

精彩评论

暂无评论...
验证码 换一张
取 消