How do i make the names appear more to the left and reduce the spacing between the checkbox and the name?

I’m rendering a Django form field (CheckboxSelectMultiple) inside a custom dropdown. The checkboxes and labels (names) are visually shifted to the right. I want the dropdown to look like a clean checklist, with all checkbox icons aligned in the same column and the text starting immediately to the right of the checkboxes, without extra indentation.checkbox and names far to the right

{{ form.non_field_errors }}
{% for field in form %}
  <div style="margin-bottom: 1rem;">
    {{ field.label_tag }}<br>
    {% if field.name == 'team_members' %}
      <div class="dropdown">
        <button type="button" onclick="toggleDropdown(this)">Select Team Members</button>
        <div class="dropdown-content" style="display:none;">
          {% for checkbox in field %}
            <label style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
              {{ checkbox.tag }}
              <span style="font-size: 1rem;">{{ checkbox.choice_label }}</span>
            </label>
          {% endfor %}
        </div>
      </div>
    {% else %}
      {{ field }}<br>
    {% endif %}
    {{ field.errors }}
  </div>
{% endfor %}

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 100;
  min-width: 220px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.dropdown-content label {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  cursor: pointer;
  justify-content: flex-start;
  gap: 2px; /* smaller gap */
}

.dropdown-content input[type="checkbox"] {
  margin-right: -5px; /* remove extra margin */
  transform: scale(1.1);
}

</style>

What I tried:

• Removed all padding and margins from .dropdown-content, label, and input[type="checkbox"].

• Reduced the gap between checkbox and text.

• Tried ul, li { padding: 0; margin: 0; list-style: none; } in case Django’s field rendered as a list (it didn’t).

• Used position: absolute with left: 0 on the checkbox to force it to the left, but this made the checkbox appear on the right side of the label text instead.

• Attempted order: -1 in flexbox to move the checkbox before the text, but alignment still seemed inconsistent.

Вернуться на верх