I'm building a to-do list website and for some reason all the tasks created have too much space around the checkbox. screenshot of the tasks added.
I tried styling the checkbox to have 0 padding, 0 margin, changing the justify-content and align-items of the task but nothing seems to work. Here's the html, relevant part of css and javascript:
<!DOCTYPE html>
<html>
<head>
<title>task-ify - by livia</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 id="website-title">task-ify</h2>
</header>
<div class="screen">
<form>
<p id="newtask">new task</p>
<input type="text" id="task" maxlength="27">
<button type="button" id="savebttn" onclick="saveTask()">save</button>
</form>
<div class="todofield">
<nav>
<p>filters:</p>
<button type="button" id="filter" onclick="viewAll()">ALL</button>
<button type="button" id="filter" onclick="viewToDo()">TO-DO</button>
<button type="button" id="filter" onclick="viewDone()">DONE</button>
</nav>
<div class="taskgallery" id="taskgallery">
<div class="taskview" id="taskview">
</div>
</div>
</div>
</div>
<footer><p>made by livia©</p></footer>
<script src="script.js"></script>
</body>
</html>
.taskgallery{
box-sizing: border-box;
border-radius: 8px;
border: 0.1em solid #49311d;
width: 90%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 3em;
padding: 20px;
}
.taskview{
display: flex;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
width: 98%;
height: 98%;
gap: 1.5vw 3vw;
}
#task1{
display: flex;
flex-direction: row;
width: 30%;
height: 5%;
align-content: center;
}
#task1 > label{
margin: 0px 10px;
border-radius: 20px;
width: 95%;
align-content: center;
padding-left: 10px;
font-size: 1.8vh;
color: #0A0903;
background-color: #feaf55;
}
input [type="checkbox"]{
padding: 0 !important;
margin: 0 !important;
}
function saveTask(){
const newTask = document.getElementById('task');
if(newTask.value != ''){
const task = document.createElement('div');
task.className = 'task';
task.id = 'task1'
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
const label = document.createElement('label');
label.textContent = newTask.value;
//task.classList.add('to-do');
checkbox.addEventListener('change', function() {
if (this.checked) {
label.style.textDecoration = 'line-through';
task.classList.remove('to-do');
task.classList.add('done');
} else {
label.style.textDecoration = 'none';
task.classList.remove('done');
task.classList.add('to-do');
}
});
task.appendChild(checkbox);
task.appendChild(label);
document.getElementById('taskview').appendChild(task);
tasks.push(task);
newTask.value = '';
}
}
Probably typo: there should be no space between input
and [type...]
part:
input[type="checkbox"]
then all the paddings and margins inside that block apply correctly :) the space which still is there it's margin
from #task1 > label {}
.
Attached working snippet below
const tasks = [];
function saveTask(){
const newTask = document.getElementById('task');
if(newTask.value != ''){
const task = document.createElement('div');
task.className = 'task';
task.id = 'task1'
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
const label = document.createElement('label');
label.textContent = newTask.value;
//task.classList.add('to-do');
checkbox.addEventListener('change', function() {
if (this.checked) {
label.style.textDecoration = 'line-through';
task.classList.remove('to-do');
task.classList.add('done');
} else {
label.style.textDecoration = 'none';
task.classList.remove('done');
task.classList.add('to-do');
}
});
task.appendChild(checkbox);
task.appendChild(label);
document.getElementById('taskview').appendChild(task);
tasks.push(task);
newTask.value = '';
}
}
.taskgallery {
box-sizing: border-box;
border-radius: 8px;
border: 0.1em solid #49311d;
width: 90%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 3em;
padding: 20px;
}
.taskview {
display: flex;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
width: 98%;
height: 98%;
gap: 1.5vw 3vw;
}
#task1 {
display: flex;
flex-direction: row;
width: 30%;
height: 5%;
align-content: center;
}
#task1 > label {
margin: 0px 10px;
border-radius: 20px;
width: 95%;
align-content: center;
padding-left: 10px;
font-size: 1.8vh;
color: #0a0903;
background-color: #feaf55;
}
input[type='checkbox'] {
padding: 0 !important;
margin: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<title>task-ify - by livia</title>
</head>
<body>
<header>
<h2 id="website-title">task-ify</h2>
</header>
<div class="screen">
<form>
<p id="newtask">new task</p>
<input type="text" id="task" maxlength="27" />
<button type="button" id="savebttn" onclick="saveTask()">save</button>
</form>
<div class="todofield">
<nav>
<p>filters:</p>
<button type="button" id="filter" onclick="viewAll()">ALL</button>
<button type="button" id="filter" onclick="viewToDo()">TO-DO</button>
<button type="button" id="filter" onclick="viewDone()">DONE</button>
</nav>
<div class="taskgallery" id="taskgallery">
<div class="taskview" id="taskview"></div>
</div>
</div>
</div>
<footer><p>made by livia©</p></footer>
<script src="script.js"></script>
</body>
</html>