Skip to main content

How do I make this checkbox be before my h3 element?

I have this HTML and CSS markup:

body {
  background-color: #f5f5f5;
}

._contain_items {
  display: block;
  width: 1000px;
  height: fit-content;
  border: 1px solid rgba(0, 0, 0, .12);
  background-color: #ffffff;
}

._inline_task {
  display: flex;
  flex-direction: row;
}

._when {
  margin-top: 0% !important;
  margin-left: auto;
  margin-bottom: 0% !important;
  align-self: flex-end;
}

._lightweighted {
  margin-top: 0% !important;
  font-size: 16px;
  font-weight: 500;
  color: #7f8ca1;
}

._title_task {
  margin-top: 0% !important;
  margin-bottom: 0% !important;
}

.checkbox-container {
  width: 50px;
  height: 28px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  position: relative;
}

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

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

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

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

.checkbox-container input[type="checkbox"]:checked+label:after {
  opacity: 1;
}
<div class="_contain_items">
  <h3> Employee Tasks </h3>
  <hr style="border: none;height: 1px;background-color: #333;">

  <div class="_inline_task">

    <div class="checkbox-container">
      <input type="checkbox" id="checkbox" />
      <label for="checkbox"></label>
    </div>

    <h3 class="_title_task"> Title of the task </h3>
    <h3 class="_when"> Tomorrow </h3>

  </div>

  <p class="_lightweighted"> Housekeeping </p>

</div>

</body>

The problem that I'm facing is at the checkbox. I want to make a circle checkbox with this ✔️ sign. When position is absolute it works as intended but it is not before h3(Title of the task). When I change position at relative the circle appears at the right place but the sign its not there. How do I make it appear before the h3?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/BimS9UI
Labels:

Comments

Post a Comment

Popular posts from this blog

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

The number of nodes and edges I calculated manually and by a method provided by networkx library dont match

I am trying to analyse a graph using networkx library in Python. I have implemented a function that returns the nodes and edges of that graph. After that I counted the number of nodes and edges by implementing the len() function for nodes and edges, which gave me 17 for both nodes and edges. However, when I used the method graph.number_of_nodes() of networkx library it gave me 53. My code: import pandas as pd import networkx as nx import matplotlib.pyplot as plt header_list = ["a","b","w"] E =pd.read_csv("aves-barn-swallow-contact-network.edges",sep=" ",header= None,names=header_list) # print(E.head()) # prints first few rows of the csv file G = nx.from_pandas_edgelist(E,"a","b",["w"]) nx.draw(G) plt.show() class GraphAnalyse: #finding nodes and edges def nodeEdge(self,Graph): nodes = Graph.nodes() edges = Graph.edges() ...
Post a Comment
Read more