Issue involving two cards within a radio group

Within my design, I placed a radio button in two cards and grouped them together by nesting the cards inside a btn-group. While this setup functions well, it encounters layout issues on small display sizes. Specifically, when the screen shrinks to xs size, the two columns should occupy an entire row but instead, the second card disappears without being scrollable. Despite numerous attempts, I have been unable to resolve this issue for small screens. When I remove the radio group wrapper, the layout works properly but unfortunately, the functionality of my radio buttons is lost.

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <!-- Grid row -->
        <div class="row">
          <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <div class="col-12 col-lg-6 col-md-6">
              <div class="card">
                <div class="card-body">
                  <h5 class="mb-4">Card Title 1</h5>
                  <div class="d-flex justify-content-center">
                    <div class="card-circle d-flex justify-content-center align-items-center">
                      <i class="fa fa-users light-blue-text"></i>
                    </div>
                  </div>
                  <p class="grey-text">Paragraph 1.</p>
                  <label id="label1" class="btn btn-secondary active" for="input1">
                                                                    Radio1
                                                                    <input type="radio" id="input1"
                                                                           name="name1"
                                                                           value="val1" checked>
                                                                </label>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-body">
                  <h5 class="mb-4">Card title 2</h5>
                  <div class="d-flex justify-content-center">
                    <div class="card-circle d-flex justify-content-center align-items-center">
                      <i class="fa fa-user light-blue-text"></i>
                    </div>
                  </div>
                  <p class="grey-text">Card paragraph 2.</p>
                  <label id="label2" class="btn btn-secondary" for="radio2">
                                                                    <input type="radio" id="radio2"
                                                                           name="name1"
                                                                           value="val2">
                                                                    Radio 2</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Although not functioning, the layout remains intact:

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <!-- Grid row -->
        <div class="row">

          <div class="col-12 col-lg-6 col-md-6">
            <div class="card">
              <div class="card-body">
                <h5 class="mb-4">Card Title 1</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fa fa-users light-blue-text"></i>
                  </div>
                </div>
                <p class="grey-text">Paragraph 1.</p>
                <label id="label1" class="btn btn-secondary active" for="newSurgery">
                                                                    Radio1
                                                                    <input type="radio" id="input1"
                                                                           name="name2"
                                                                           value="val1" checked>
                                                                </label>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 col-md-6 mb-lg-0 mb-4">
            <div class="card">
              <div class="card-body">
                <h5 class="mb-4">Card title 2</h5>
                <div class="d-flex justify-content-center">
                  <div class="card-circle d-flex justify-content-center align-items-center">
                    <i class="fa fa-user light-blue-text"></i>
                  </div>
                </div>
                <p class="grey-text">Card paragraph 2.</p>
                <label id="label2" class="btn btn-secondary" for="radio2">
                                                                    <input type="radio" id="radio2"
                                                                           name="name2"
                                                                           value="val2">
                                                                    Radio 2</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

htmlcssbootstrap-4

Answer №1

The second code snippet is functioning correctly, but there is a mistake in the for attribute of the first label. You must click on the actual radio button to see it in action.

To fix this issue, change the for attribute from the incorrect newSurgery to input1. Here is how the corrected code should look:

<label id="label1" class="btn btn-secondary active" for="input1">
<!-- not for="newSurgery"-->
    Radio1
    <input type="radio" id="input1" name="name2" value="val1" checked>
</label>

Answer №2

Radio buttons are independent of their surrounding HTML elements. The key is to give them the same name:

<input type="radio" id="input1" name="SAME_NAME_HERE" value="val1" checked />
<input type="radio" id="input2" name="SAME_NAME_HERE" value="val2" />

The name attribute groups radio buttons together. Each button can have a different id and value. Remember, the label's for attribute should match the radio button's id, not the name.

Your code has unnecessary row and column markup. Review the Bootstrap documentation for clarity.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="card"> ... </div>
        </div>
        <div class="col-md-6">
            <div class="card"> ... </div>
        </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/aq9Laaew/250477/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do not generate an HTML cookie

I've encountered an issue while trying to create a cookie using the following code: window.onload = function() { var value = readCookie('username'); if(value == null){ alert("null"); document.cookie = "username=Bob; expires=Thu, 18 ...

javascripthtml

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

I'm really struggling with this issue. I have a situation where I need to center a downward pointing arrow within some divs. It should be positioned in the middle, on a brown line, and on top of everything else. The last div should also include the a ...

htmlcsscss-shapes

What is the purpose of using translateY(-50%) to vertically center an element that is positioned at top: 50%?

I've noticed that this code successfully aligns a div vertically within its parent element: .element { position: relative; top: 50%; transform: translateY(-50%); } My curiosity lies in the reasoning behind this. Initially, I thought that the p ...

htmlcss

Position a form in the center of a container and showcase an additional div on the right with an indentation

My goal is to center a form within a div and have another div on the right that is slightly indented, but I'm struggling to align the elements properly. How can I achieve this layout using CSS? Additionally, is there a way to center the right-hand d ...

htmlcss

Troubles with aligning and floating three divs in the center of a container div – a CSS conundrum illustrated with code snippets and a basic diagram

I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...

csslayouthtmlcss-floatcentering

The res.download() function in Express is failing to deliver the accurate URL to the client

When trying to utilize the res.download() method for downloading specific files from a server, there is an issue where triggering the res.download does not redirect the client to the correct URL. The files intended for download are located in a directory s ...

javascripthtmlcssnode.jsexpress

Error 404: Troubleshooting an Azure Issue with Custom TrueType Font in .NET MVC 5

I am encountering an issue that has been previously addressed. Despite implementing the suggested solutions, the problem persists. In an effort to enhance my project, I downloaded two custom ttf fonts called Monterey and Bakery. Both fonts have been succ ...

cssasp.net-mvcvisual-studioazurefonts

What is the solution to removing the bottom margin from the jumbotron in the bootstrap framework?

I am building a website for my high school robotics team and I am new to HTML and CSS (bootstrap). I want to get rid of the gap between my banner and navbar on my site. Is there a way to remove that space? Check out our website: www.robotichive3774.com & ...

htmlcsstwitter-bootstrap

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

I have attempted to copy the table n number of times using a for loop. Unfortunately, the for loop seems to only work on the first iteration. I am aware that this is due to not having unique IDs assigned to each table. As a beginner, I am unsure how to cre ...

javascriptjqueryhtml

Incorporating multiple class names within a ruby link_to tag

<%= link_to 'Certificate Name', certificates_path(:sort => 'name'), id:'name_header', class:@name_header %> I am looking to enhance the styling of this link using bootstrap. I would like to include multiple class nam ...

ruby-on-railsbootstrap-4

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

I need help with saving a to-do list in HTML so that it persists even after refreshing the browser. Can anyone assist me? html <!DOCTYPE html> <html> <head> <title>My To-Do List</title> <link rel="sty ...

javascriptjquerycsshtml

What is the best way to include an active CSS class in a menu item?

Link to example Can you figure out why the Home button is not turning red in this code snippet? .navbar a:hover, .navbar a:focus, .navbar a:active { color: red !important; } <nav class="navbar navbar-expand-lg"> <div class="collapse navbar ...

htmlcsstwitter-bootstrap

Implementing class changes based on scroll events in JavaScript

const scrollList = document.getElementsByClassName('scrollList'); function scrollLeft() { scrollList.scrollLeft -= 50 } function scrollRight() { scrollList.scrollLeft += 50 } #scrollList { display: flex; overflow: auto; width: 10 ...

javascripthtmlcss

A guide on how to activate an event when a radio button is selected using jQuery

I experimented with implementing this. When I try clicking on the radio button, the code functions correctly, but the radio button does not appear to be checked and remains unchanged. Any ideas on how to resolve this issue? <p> <input id="p ...

javascriptjqueryhtml

Discover how to access the translations of a specific key in a chosen language by utilizing the angular $translate functionality

How can I retrieve a specific language translation using angular's $translate function within a controller? The $translate.instant(KEY) method returns the translation of the specified key based on the currently selected language. What I am looking for ...

htmlangularjslocalizationtranslation

JavaScript | Calculating total and separate scores by moving one div onto another div

I have a fun project in progress involving HTML and Javascript. It's a virtual zoo where you can drag and drop different animals into their designated cages. As you move the animals, the total count of animals in the zoo updates automatically with the ...

javascripthtmlcountdrag-and-dropdrop

Ensure the footer is positioned at the bottom of the page using Bootstrap

I am having trouble with placing my footer at the end of the page when there is only a little text. I added h-100 to the container to try and fix it. <div class="container h-100" style="margin:40px;"> <!-- wrapper for all containers --> Howev ...

htmlcssbootstrap-4

Clearing existing HTML content in the TR body

I've been struggling with a Jquery/Ajax call that updates cart details. Currently, I can't seem to clear the existing HTML content in the cart-body (tablebody) even though the ajax request adds all the items to the cart successfully. The code sni ...

javascriptjqueryhtmlajax

Is it advisable to hold off until the document.onload event occurs?

I'm working with a basic HTML file where I need to generate SVGs based on data retrieved through an AJAX call. Do I need to ensure the document is fully loaded by enclosing my code within a document.onload = function() { ... } block, or can I assume ...

javascripthtmlajaxsvgd3.js

The browser is displaying the raw text data of a file rather than the formatted HTML content

As a newbie in the world of webpage development, I am currently working on my very first webpage project. I have written some HTML code using a text editor and saved it as an HTML file. However, when I try to view it in my browser, all I see is plain HTML ...

html