Ruby-on-Rails [SOLVED]: When I use css on radio buttons it causes the value not to go through when form is submitted

Ruby-on-Rails [SOLVED]: When I use css on radio buttons it causes the value not to go through when form is submitted

Home Forums Frameworks Ruby on Rails Tutorials Ruby-on-Rails [SOLVED]: When I use css on radio buttons it causes the value not to go through when form is submitted

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246760

    Cloudy Point
    Keymaster

    QuestionQuestion

    I’m using css on radio buttons for my rails form and when I submit the form the values do not show in my database, but when I take away the css the value does show in the database, so I realize it’s something to do with my css, but what is causing it?

    form.css

    input[type="radio"] {
      display: none;
    }
    
    label {
      display: block;
      border: 2px solid #0AA8E5;
      border-radius: 20px;
      padding: 1rem;
    
    
      text-align: center;
      box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
      position: relative;
    }
    input[type="radio"]:checked + label {
      background: #0AA8E5;
      color: hsla(215, 0%, 100%, 1);
      box-shadow: 0px 0px 20px #0AA8E5;
      &::after {
        color: hsla(215, 5%, 25%, 1);
        font-family: FontAwesome;
        border: 2px solid hsla(150, 75%, 45%, 1);
        content: "f00c";
        font-size: 24px;
        position: absolute;
    
        left: 50%;
        transform: translateX(-50%);
        height: 40px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        background: white;
        box-shadow: 0px 2px 5px -2px hsla(0, 0%, 0%, 0.25);
      }
    }
    

    form.html.erb

      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>
        <div class="row">
    
    
          <div class="col-md-6">
            <%= f.radio_button(:role, "startup", id: 'control_01', name: "select", value: 'startup') %>
            <label for="control_01">
              <h2>Startup</h2>
              <p>Join the startup side</p>
            </label>
          </div>
    
          <div class="col-md-6">
            <%= f.radio_button(:role, "investor", id: 'control_02', name: "select", value: 'investor') %>
            <label for="control_02">
              <h2>Investor</h2>
              <p>Join the investor side</p>
            </label>
          </div>
       </div>
       <%= f.submit "Sign up", class: "btn btn-success" %>
     <% end %>
    

    #246761

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    Just change display: none; to visibility: hidden;

    display: none removes the element from the document flow,

    Source: https://stackoverflow.com/questions/47966675/when-i-use-css-on-radio-buttons-it-causes-the-value-not-to-go-through-when-form
    Author: Manishh
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.