Skip to content

Task List Checkbox Alignment

Summary

The checkboxes inserted when creating a task list do not align with the list bullets.

Steps to reproduce

  1. Add a list with radio boxes to an issue description
  2. Use a mix of list items with and without checkboxes

Expected behavior

  • The radio boxes should align with the bullets of equal depth
  • The left edge of text should alight with text of equal depth

Actual behavior

  • The radio boxes start where text content normally starts
  • The left edge of text is shifted to the right

Relevant logs and/or screenshots

 - Task List
   - [ ] Task 1
   - [ ] Task 2
   - Task 3
     - [ ] Task 3a
     - [ ] Task 3b
   - [ ] Task 4

Screenshot_from_2016-09-22_10-30-57

Possible fixes

  1. Pull the checkbox to the left with CSS
  2. Omit the whitespace after the checkbox
input.task-list-item-checkbox {
  margin-left: -28px;
  width: 28px;
}

Screenshot_from_2016-09-22_10-24-05