javascripthtmlcssinputcheckbox

Too much clickable space around checkbox


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&copy;</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 = '';
    }
}

Solution

  • 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&copy;</p></footer>
        <script src="script.js"></script>
      </body>
    </html>