Selecting the incorrect label while hovering over a checkbox

I am using Bootstrap and encountering an issue with displaying checkboxes after clicking on an accordion element.

While the first checkbox is displayed correctly, the checkboxes inside the accordion do not appear as expected. It is confusing to me why this is happening.

To summarize, my problems are as follows: - When I click on the label of the child category, the checkbox of the parent category gets checked. - The checkbox of the child category does not seem to appear.

HTML

<div class="container">
<div class="accordion-item position-relative row">
  <div class="col-6 container-checkboxes">
    <label class="form-check-label" for="checkbox">
      <input class="form-check-input" type="checkbox" value="" id="checkbox">
      <span class="checkmark"></span>
      Category 1
    </label>
  </div>
  <div class="col-6">
    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="collapse"></div>
  </div>
  <div id="collapse" class="accordion-collapse collapse" aria-labelledby="heading" data-bs-parent="#accordionFilter">
    <div class="accordion-body">
      <div class="container-checkboxes">
        <label class="form-check-label" for="checkbox-sub1">
          <input class="form-check-input" type="checkbox" value="" id="checkbox-sub1">
          <span class="checkmark"></span>
          Subcategory 1
        </label>
      </div>
    </div>
  </div>
</div>
</div>

SCSS

.accordion {
  .accordion-item {
    background: none;
    border: none;
  }
  .accordion-button {
    background: none;
    padding: 0.4rem 0 0 0;
    &::after {
      height: 1rem;
      width: 1rem;
    }
    &:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
    }
    &:not(.collapsed) {
      box-shadow: none;
    }
  }
}


.container-checkboxes {
  .form-check-label {
    padding-left: 2rem;
    input {
      cursor: pointer;
      height: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }
    .checkmark {
      border: 1px solid #9b9b9b;
      height: 21px;
      left: 0;
      position: absolute;
      top: 0;
      width: 21px;
      &:after {
        border: solid white;
        border-width: 0 3px 3px 0;
        content: "";
        display: none;
        height: 0.8rem;
        left: 6px;
        position: absolute;
        top: 3px;
        transform: rotate(45deg);
        width: 0.4rem;
      }
    }
    &:hover input + .checkmark {
      background-color: #ccc;
    }

    input:checked + .checkmark {
      background-color: green;
      border: none;
    }

    input:checked + .checkmark:after {
      display: block;
    }
  }
}

scss

You can find my code here: https://codepen.io/zazzou/pen/bGaBoXa

Thank you for your assistance.

Answer №1

To prevent the absolutely positioned checkboxes from breaking out of the parent element, you can simply add position: relative to the parent element's class .form-check-label.

By setting the parent element's position property, you ensure that the absolutely positioned child elements stay within the boundaries of the parent element.

.container-checkboxes {
  .form-check-label {
    // ...
    position: relative;
    // ...
  }
}

You have the flexibility to use different values for the position property of the parent element. The key is to have position defined.

Here's a complete demonstration:

/* The following CSS has been converted to support Stack Overflow's syntax. It mirrors your original code, only with the addition of position: relative. Refer to the comment for details. */

/* Your existing CSS styles go here */

.container-checkboxes .form-check-label {
  padding-left: 2rem;
  position: relative; /* Make sure to include this */
}

/* Additional CSS styles for checkboxes and labels */

Your HTML markup goes here...

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

The side modal features a full-height design with headers, bodies, and footers that are

I have created a side modal that extends to full height. The content in the modal body is quite lengthy, but I am facing an issue where the header, body, and footer are not equal in size. I am considering using scrollspy on the HTML body tag to potentially ...

Tips for choosing elements based on a specific attribute (such as fill color) in D3.js using the SelectAll method

I have various sets of circles on a map - 10 red circles, 10 blue circles, and 10 green circles. Is there a way to use d3 selectAll or select to specifically choose only the red circles? Are there any alternative methods for achieving this? The color of ...

What is the best way to achieve a precision of 6 decimal places in JavaScript when working with decimals?

While working on coding to round numbers to six decimal places after performing some arithmetic operations, I encountered a problem. I was iterating through the elements of an array and conducting calculations based on the array contents. To achieve roundi ...

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Is there a way to adjust the position or gravity of Tipsy? The plugin offers various options for gravity that can be set through the script: nw | n | ne | w | e | sw | s | se Currently, I have set it to s position, as shown in this demo: http://jsfiddle. ...

decorating elements in a line with colored backgrounds

I am facing an issue where I want to keep three divs aligned horizontally on the same line, but their background colors are causing them to not align properly. Adding margin or padding causes the divs to wrap up instead of staying in line. #service_cont ...

Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

I am currently working on a product customization form where the radio buttons are hidden using opacity:0. My goal is to have the border of the image turn black when an option is selected as a visual feedback for the user. I've implemented an event l ...

Attempting to customize the appearance of a submit button independently from other input elements

Hey there, I have a question that might sound silly, but bear with me as I'm still learning CSS. I've been experimenting with CakePHP and its form helper to create a form. Here's a snippet of the code I'm working with: <p><?ph ...

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

Using brush strokes to create a unique design on the canvas page

Currently, I am working on implementing a brush-like effect on a web page. The task involves providing multiple patterns/textures in the background and allowing users to drag their mouse to create the pattern effect on the page. If you want to see the st ...

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

modify the color of a particular div element in real-time

I am looking to dynamically change the color of the divs based on values from my database. Here is what I have so far: Database: shape id is_success id1 0 id2 1 id3 0 id4 1 <div class="container" style="background: black; widt ...

Trigger a Jquery sound when an HTML result is found and displayed

I am using a Jqgrid to display a table. Within the "return" column, along with other data, there is a span element like the following: <span class="return" id="ret0>4.25%</span> My webpage contains multiple instances of these spans: < ...

Hide elements forever once the form is submitted

I'm seeking help to figure out how to make certain elements disappear after a form submission on my website's dashboard page. Specifically, I need to hide three elements once the user has submitted a form. Elements that need to be hidden: .vc_t ...

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

Bootstrap grid button with maximum flexibility

I am currently exploring the intricacies of the bootstrap grid system. My goal is to create a set of buttons that look like this: https://i.sstatic.net/V5meG.png Each button should expand to fill the width and height of its container. However, when a b ...

Combine two FontAwesome icons in a stacked manner

Is there a way to group 2 icons together and display them one above the other? I attempted to use the fa-stack class, but the images are overlapping. How can I achieve this layout? <span class="fa-stack fa-lg"> <i class="fa fa-envelope fa-stack ...

Stop the page from automatically scrolling to the top when the background changes

Recently, I've been experimenting with multiple div layers that have background images. I figured out a way to change the background image using the following code snippet: $("#button").click(function() { $('#div1').css("background-image ...

Separate a set of HTML elements with specific heights into individual page divisions

The current method in place is quite average: Prior knowledge of each object's height is required. We possess a set of such objects that could potentially be separated by a page break. We start with a blank slate and insert an opening <div class= ...

Email button designed to trigger the execution of PHP code

Can a hyperlink button in Outlook emails be used to run PHP code? For instance, I've designed a computer request form that appears as follows: New Request When you select the "new request" button, it changes to indicate completion: Completed Reque ...