simple_form render radio button group with <image>( X ) Label with twitter bootstrap?

Question

Im trying for some time to use simple_form to create the below example but + the label and fixing some styling. Anyone knows how to fix:

• remove the 2's no idea where they come from (seems strange i18n bug on production it throws a whole bunch of I18n in )
• Have the text Male or Female after the radio button

Is the result from below code:

     .clear
    = f.label "Gender"
    = f.collection_radio_buttons(:gender, [['Male', 'icon_male'], ['Female', 'icon_female']],
                                 :first, :last,
                                 :item_wrapper_class => 'horizontal',
                                 ) do |gender|
      = gender.label { image_tag("/assets/icons/16x16/#{gender.text}.png") + gender.radio_button  }

    .clear
    .ruler

Heliotrope

What happens if you remove the .clear and .ruler stuff? In fact every thing outside the collection_radio_buttons. It would be good to isolate the code to confirm that the bug is within the collection radio_buttons. – Fervent

Tried that it is inside the simple_form code – Heliotrope

Is there a way to do this and get rid of the radio selection button and just use a Boostrap button or an image? – Oriflamme

Answer 1

Final working snippet:

= f.label "Gender"
- f.collection_radio_buttons(:gender, [['Male', 'icon_male'], ['Female', 'icon_female']], :first, :last, :item_wrapper_class => 'horizontal') do |gender|
  = gender.label { image_tag("/assets/icons/16x16/#{gender.text}.png") + gender.radio_button  }
.clear
.ruler

Heliotrope

Answer 2

To remove the 2s and get the text label in there on the right use:

= f.label "Gender"
= f.collection_radio_buttons(:gender, [['Male', 'icon_male'], ['Female', 'icon_female']],
                             :first, :last,
                             :item_wrapper_class => 'horizontal',
                             ) { |gender| gender.label { image_tag("/assets/icons/16x16/#{gender.text}.png") + gender.radio_button + gender.text } }

Removing the = before the gender.label will remove the 2s.

Fervent

what happens if you change it to a - – Fervent

HAML ( = output to screen _( ( - calculate la value ) so that will do nothing... – Heliotrope

Yes thats really just not a solution, I have now removed the icons, it must be me really being newbie here or this is really not easy accomplised. Guess ill be digging the simple_form source codes soon to figure it out in the end – Heliotrope

I just want confirmation that you have tried it so i can continue helping you debug the problem. – Fervent

Yes I have tried it but this is basics HAML = means output to screen HAML - means calculate or call function – Heliotrope

Rubytastic You should upvote 23inhouse's answer on changing to a -, I did. He is correct on changing the - but he might have said to do it to the wrong element. See my answer. The difference is = will render the output of the iterator. - will suppress it. These translate to erb's <%- and <%= minus the "<%". I tried your code in my answer and it does indeed fix the error. (minus the extra comma) – Attainder

How can I get rid of the little radio button? – Oriflamme

Answer 3

Rubytastic you have an extra comma in your answer. Here is the correct code that @23inhouse was suggesting. It works for me in

• rails 3.1.3
• simple form 2.0.2
• haml 3.1.4
• haml-rails 0.3.4

    = simple_form_for @object_new do |f|
      .clear
      = f.label "Gender"
      - f.collection_radio_buttons(:gender, [['Male', 'icon_male'], ['Female', 'icon_female']], :first, :last, :item_wrapper_class => 'horizontal') do |gender|
        = gender.label { image_tag("rails.png") + gender.radio_button  }
      .clear
      .ruler

Attainder

Thank you @engineerDave, Rubytastic is repeatedly creating bounties to get the correct answer, then stating there is a problem in the answer and then not paying the bounty for the question. :-( – Fervent

I shall try this and if its my fault then grand the question as approved. I do not repeatedly create new bounties without paying bounty. I don't do much bounties at all from time to time. – Heliotrope

Ok then fair is fair, I've updated question with the total correct syntax it shall be then. The initial comment didn't work and maybe I was to short around the corner no hard feelings ;) I shall let it expire so you both get 50% of the bounty wich Guess is fairest solution. – Heliotrope

I correctly answered this question the last time asked it about a month. That question also had a bounty which you didn't reward. Same question, same answer... answered a month ago. #10012470 – Fervent

You can just give the bounty to @23inhouse. No biggie. I've been doing Rails for a while but only recently started paying attention to my SO points.:-) Just trying to contribute where/when I can. This was too minor of an edit IMO (on my part) to get bounty points. Good luck in your learning of Rails! – Attainder