CODEWITHSUNDEEP
htmlcss
Ahmed Wagdi
Ahmed Wagdi

Reputation: 4401

How to break Vertical line in a checkbox list

I have this Checkbox list and I want to break it into many lines using CSS or attrs in Django forms ..mainly it is a CheckboxSelectMultiple

here is the code of forms.py:

town = forms.ModelMultipleChoiceField(Town.objects.all(),
                                      widget=forms.CheckboxSelectMultiple(
                                          attrs={
                                              'style': 'vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;'
                                          }
                                      )
                                      )

and that is how it looks like now :

enter image description here

every time I add more choices it keeps increasing int he same vertical line

rendered HTML

      <div align="left">
      Choose up to 5 images for the Ad, at least 1 is required : <br><br>
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <br><br>
          Chose in which town is this ad available ( Can pick more than one) :<br>
      <ul id="id_town">
    <li><label for="id_town_0"><input type="checkbox" name="town" value="1" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_0" />
 Town  1</label>

</li>
    <li><label for="id_town_1"><input type="checkbox" name="town" value="2" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_1" />
 Town 2</label>

</li>
    <li><label for="id_town_2"><input type="checkbox" name="town" value="3" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_2" />
 Town 3</label>

</li>
    <li><label for="id_town_3"><input type="checkbox" name="town" value="4" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_3" />
 town 4</label>

</li>
    <li><label for="id_town_4"><input type="checkbox" name="town" value="5" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_4" />
 town 5</label>

</li>
</ul>
              </div>

Upvotes: 0

Views: 437

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

The harder way is to change the way Django renders those checkboxes (they're currently in a list), and I can't help you with that (you might have to ask another question), the easier way would be to write some css to change the appearance of what you already have. In that case something like this should work:

#id_town {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

#id_town li {
  float: left;
}
<div align="left">
      Choose up to 5 images for the Ad, at least 1 is required : <br><br>
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <input type="file" name="image" required id="id_image" /><input type="file" name="image" required id="id_image" />
      <br><br>
          Chose in which town is this ad available ( Can pick more than one) :<br>
      <ul id="id_town">
    <li><label for="id_town_0"><input type="checkbox" name="town" value="1" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_0" />
 Town  1</label>

</li>
    <li><label for="id_town_1"><input type="checkbox" name="town" value="2" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_1" />
 Town 2</label>

</li>
    <li><label for="id_town_2"><input type="checkbox" name="town" value="3" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_2" />
 Town 3</label>

</li>
    <li><label for="id_town_3"><input type="checkbox" name="town" value="4" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_3" />
 town 4</label>

</li>
    <li><label for="id_town_4"><input type="checkbox" name="town" value="5" style="vertical-align: middle;white-space: nowrap;display: block;float: left;padding-right: 10px;text-indent: -22px;" id="id_town_4" />
 town 5</label>

</li>
</ul>
              </div>

Upvotes: 1

Related Questions