CODEWITHSUNDEEP
ruby-on-railsrubyradio-button
Jonas
Jonas

Reputation: 29

How to hide radio_button and use a div/label as the button instead? (Ruby on Rails)

In a simple_form I'm trying to style the radio_buttons.

But how do I hide the radio_buttons and select a table_id by clicking on the label?

  <% Table.all.each do |rt| %>
    <div class="btn-group" data-toggle="buttons-radio">
      <%= f.radio_button :table_id, "fd", :id=>"hi-#{rt.id}", :style=>"display:none;" %>
      <label for="hi-#{rt.id}" class="btn btn-primary box3"><%= rt.id %>
      </label>
    </div>
  <% end %>

Notes:

table has_many :reservations

reservation belongs_to :table

table_id is a integer-column in reservations table.

Screenshot of the buttons

Upvotes: 0

Views: 42

Answers (1)

Jonas
Jonas

Reputation: 29

I found an answer.

View:

<% Table.all.each do |rt| %>
  <label class="btn btn-primary box3" for="reservation_table_id_<%=rt.id%>">
    <%= f.radio_button :table_id, rt.id %>
    <span><%= rt.id %></span>
  </label>
<% end %>

Style:

label > input{
  visibility: hidden;
  position: absolute;
}
label > input + span{
  cursor:pointer;
  border:2px solid transparent;
}

Upvotes: 1

Related Questions