Rails - Use image instead of radio buttons

Question

I have a form where I have a couple of radio buttons. In the display, I replaced the radio buttons with images with the help of this question here

My code is now as follows:

<div class="form-group col-md-5">
    <%= order_item_fields.label :frame_id do %>
        <%= order_item_fields.radio_button :frame_id, "1", :checked => true%> 
        <%= image_tag("http://placehold.it/40x60/0bf/fff&text=A", size: "80")  %>
    <% end %>
    <%= order_item_fields.label :frame_id do %>
        <%= order_item_fields.radio_button :frame_id, "2"%> 
        <%= image_tag("http://placehold.it/40x60/0bf/fff&text=B", size: "80")  %>
    <% end %>
</div>

And the css is:

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  background-image: linear-gradient(0deg,rgba(255,0,149,.25),rgba(255,0,149,0));
}

This is working fine in that a. I'm getting images instead of buttons, b.hovering over the images I get a cursor and c. Image A is checked primarily.

My problem is that clicking on image B changes nothing. If I try through inspecting to change the input of B so that its checked, it works. Through clicking though its not working.

EDIT: Inspecting, I found that one problem is that size of the input is very small, while the size of the image is very big. By clicking at the upper left corner of my tag which is the input I get it checked. But its a very small area. Clicking anywhere else does not check the button.

What am I doing wrong here?

I think you should help the click on image B with some javascript. In other words: Set the status of the radio button of image B to `true` when you click image B. Cause when you click image B (in this case it's not the radio button which is clicked), the radio button status doesn't know about and will remain `false` — k.vincent, Jan 10 '20 at 15:14
@k.vincent thanks for the comment. I get your point. The link that I'm adding above has it working without JS, the answer posted below manages to do the same. This is what I'm trying to achieve as well — mrateb, Jan 11 '20 at 11:17

score 1 · Answer 1 · answered Jan 10 '20 at 15:53

1

I'd think the problem is in your CSS for [type=radio]:checked + img

I changed it (as well as the general img css) to add padding and red background for to the selected image and it seems to work just fine. (see below snippet)

Either that or your rails code does not generate the expected HTML

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  padding: 5px;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  background-color: red;
  background-image: linear-gradient(0deg,rgba(255,0,149,.25),rgba(255,0,149,0));
}

<div class="form-group col-md-5">
        <label for="imageA" name="image">
            <input checked type="radio" id="imageA" name="image"/>
            <img src="http://placehold.it/40x60/0bf/fff&text=A"/>
         </label>
        <label for="imageB" name="image">
            <input type="radio" id="imageB" name="image"/>
            <img src="http://placehold.it/40x60/0bf/fff&text=B"/>
         </label>
    </div>

answered Jan 10 '20 at 15:53

LapinLove404

1,939
1
21
26

LapinLove404 thanks a lot for the answer. My problem however is not in the display of the selected, it's in the selection itself. In other words, if I inspect the code, and edit the html to have A or B selected, I get the proper style that I want. The problem is that using the cursor to click on the image does not select it. – mrateb Jan 11 '20 at 11:07
It works well for me, or maybe I don't understand your issue. It can verified by calling `document.getElementById('imageA').checked` in navigator console. Maybe you expect the attribute "checked" to change in the HTML code? – Jean-Michel Gigault Jan 12 '20 at 18:03
1

My issue simply is that the pressing on the image does not select it (I know because there is no visible change in style and from checking the selected in the submitted form). In order to select the radio button I have to press in a very small area near the image at the upper left corner. – mrateb Jan 12 '20 at 19:08
@Jean-MichelGigault check the image I added above :) – mrateb Jan 12 '20 at 19:15
Which navigator are you testing with? – Jean-Michel Gigault Jan 12 '20 at 19:40
1

@mrateb: Did you try to change the width and height of the radio buttons? Keep the image over them in the same time. Using `0` for `width` and `height` could also cause the issue. Is possible for you to create a stackblitz demo please? There we could help better and edit the code. – k.vincent Jan 13 '20 at 07:54
@k.vincent will make sure this is added later today – mrateb Jan 13 '20 at 11:00
@mrateb same problem here, selection doesn't work. Works only if radio button is visible. i am currently using tailwindcss and javascript. btw tailwindCSS checked: property doesn't work properly either – hyukkyulee Aug 09 '21 at 02:36
@mrateb found the error. Remove '/' from input and img tags – hyukkyulee Aug 09 '21 at 03:09

Rails - Use image instead of radio buttons

1 Answers1

Linked