Unique design for circular checkbox inside Bootstrap popover

I am experimenting with a custom round checkbox

.round {
  position: relative;
}

.round label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.round input[type="checkbox"]:checked+label:after {
  opacity: 1;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #f1f2f3;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container {
  margin: 0 auto;
}
<div class="container">
  <div class="round">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox"></label>
  </div>
</div>

Additionally, I want to integrate this into a Bootstrap popover with HTML content

$(document).ready(function() {
  $('#order-popover').popover({
    html: true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  }).on('shown.bs.popover', function() {});
});
.round {
  position: relative;
}

.round label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.round input[type="checkbox"]:checked+label:after {
  opacity: 1;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #f1f2f3;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container {
  margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a href="#" id="order-popover" data-toggle="popover" data-html="true" data-placement="bottom">OPEN</a>
<div id="popover_content_wrapper" style="display:none;">
  <div style="width: 100px;">
    <div class="round">
      <input type="checkbox" id="checkbox" />
      <label for="checkbox"></label>
    </div>
  </div>
</div>

However, when I add this custom design to the bootstrap popover, the checkbox functionality stops working.

htmlcssbootstrap-4bootstrap-popover

Answer №1

It appears that the issue is with the way your popover HTML is generated when clicked, causing the for attribute to not function correctly...

To resolve this, try positioning your checkbox input element in front of the label using position:relative, setting a higher z-index, and applying opacity: 0 to hide it.

Note: While removing the for attribute may make it work as well, keeping it enhances readability of the code.

$(document).ready(function() {
  $('#order-popover').popover({
    html: true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  }).on('shown.bs.popover', function() {});

});
.round {
  position: relative;
  width: 28px;
  height: 28px;
}
/* Add more CSS styles here... */

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a href="#" id="order-popover" data-toggle="popover" data-html="true" data-placement="bottom">OPEN</a>
<div id="popover_content_wrapper" style="display:none;">
  <div style="width: 100px;">
    <div class="round">
      <input type="checkbox" id="checkbox3" />
      <label for="checkbox3"></label>
    </div>
  </div>
</div>

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 battle between dynamic PDF and HTML to PDF formats has been a hot

In my current project, I am developing multiple healthcare industry dashboards that require the functionality to generate PDF documents directly from the screen. These dashboards do not involve typical CRUD operations, but instead feature a variety of char ...

javascripthtmlangularjspdfhighcharts

Applying right margin to the nav bar without causing issues with the navbar collapse in Bootstrap - how to do it?

Objective: The goal is to adjust the position of the navigation bar items using padding or margin as indicated in red: https://i.sstatic.net/5vYTc.png Issue I noticed that applying a right padding or margin affects the collapsed (on mobile screen) list ...

htmlcssbootstrap-4

What is the best way to position the sign-in modal form on the top right corner of my website?

Hey there, I'm facing a bit of an issue and can't seem to figure out what went wrong. Recently, I inserted a Bootstrap Sign In modal in my HTML file. Here's the code: <div class="text-center"> <a href="" class ...

htmlcssbootstrap-4layoutfrontend

Creating a Dynamic List in JQuery Fancy Box for an iframe

I am new to using JQuery and I have a table with a checkbox. When the checkbox is clicked, I want a dynamic list to appear in a pop-up window. I've been having trouble implementing this. <html> <head> <label align="center">Select a ...

jqueryhtmljquery-uifancybox

Connect the CSS file in React index.html to the Flask backend

I am attempting to connect a CSS template that is serving static backend content through Flask with my React frontend. Here is the structure I am working with: client/ src/ components/ menu.jsx public/ ...

cssreactjsflask

I am interested in creating a text box that has the ability to gather user input and connect it to a search

I have been attempting to develop a text box that can collect answers and link them with the search URL. However, I am encountering issues where even though I can input text into the textbox, it is not being recognized by the script. The error message sh ...

javascripthtml

What could be causing the malfunction of my button's event handlers?

Users can fill out a form in which they provide information about a grocery item they want to add to their cart. After completing the form, they can click on the "Add Item" button. Here's the form in my app.component.html: <form (ngSubmit)="a ...

htmlangulartypescript

The combination of using p:inputText within p:layoutUnit does not function properly when placed inside p

Recently, I encountered a problem with a modal dialog that contains some input components. The issue arose when I implemented a p:layout within the dialog. Initially, the p:inputText component within a p:layoutUnit functioned properly and gained focus. Ho ...

cssprimefaces

The use of the "position: fixed" attribute can sometimes cause certain elements

Whenever I add the style position: fixed; to #cssmenu it causes the right side of the menu to disappear Is there a way to resolve this issue? Also, can you explain why it occurs so I can avoid it in the future? If there are multiple solutions, please ...

htmlcsscss-positionfixedmenubar

CSS selector for detecting elements with empty or whitespace-only content

A special selector called :empty allows us to target elements that are entirely devoid of content: <p></p> However, in some cases, the element may appear empty due to line breaks or white spaces: <p> </p> In Firefox, a workar ...

htmlcsscss-selectors

Is it possible to capture the child element's id?

After loading several images onto the page, I hide them using 'display:none': <div id="cont-img"> <img class="lista-img" src="list/1.png" id="v1" /> <img class="lista-img" src="list/2.png" id="v2" /> <img class=" ...

jqueryhtmlcss

Updating Text in Textarea upon Selection Change

Need assistance with updating the content of a textarea based on a select option change. Below is an example of my code: <tr><td>Template:</td><td> <select t name="template" onChange = "setTemplate();"> <option ...

javascripthtmltextareaselection

Issue with triggering the change event for <select> tag

Whenever the selected value of the drop down changes, the following code does not work as expected. Please make corrections if any errors are present. <!doctype html> <html lang="en"> <head> <meta charset="utf-8</scri ...

javascriptjqueryhtml

How come I am unable to upload my local image using angular-cli?

When testing my application on localhost, everything runs smoothly. However, once I publish the app to GitHub, the image fails to load. The image is located within the src/resources directory, and I have also attempted moving it to the public folder. My ...

htmlcssangularangular-cli

Preventing text and images from distorting when zooming on a website

Currently, the HTML page I'm working on has some issues when zoomed in. The paragraphs seem to break out of their designated area and display as vertical lines of text instead of staying horizontal. Additionally, the pictures on the site become overly ...

htmlcss

Issues following compilation with npm run prod

I am currently working on a small website using Laravel and Tailwind CSS on shared hosting. While I am able to use a command line tool on the host, I have encountered an issue. In my local environment, Tailwind works perfectly fine. However, after running ...

cssnpmtailwind-css

Using a dynamic HTML interface, select from a vast array of over 50,000 values by leveraging the power

I am working on a project that includes a multiselect option with over 50,000 records. We are using AJAX to fetch data from the server based on user searches, which works fine. However, when a user tries to select all records by clicking the "check all" ...

javascriptjqueryhtmlajax

Conflicts in SwiperJS Timeline Management

Having a Timeline on my Website using SwiperJS presents challenges with conflicting functions. The goal is to navigate swiper-slides by clicking on timespans in the timeline. The desired functionality for the timeline includes: Sliding to the correspondi ...

javascripthtmlcssfrontendswiper.js

Transferring input data between two HTML files in Electron with a secure login feature

Currently, I am in the process of developing an Electron app that facilitates communication between users through socket.io. The app includes a login screen where users can enter their registered email and password to access the main menu. For testing purp ...

javascriptjqueryhtmlnode.jselectron

Tips for permitting the "checking" of just a single checkbox

Is it possible to customize this codepen so that only one item can be checked at a time, with the ability to automatically uncheck the previous item when a new one is checked? Also, is there a way to use a custom image for the check mark instead of the d ...

javascripthtmlcssbootstrap-5