I have a form with 2 MultipleChoiceField's with the CheckboxSelectMultiple widget.
When rendered in the template the checkboxs have a "bullet points" to the left of each choice.
I'm thinking it has to do with the checkboxs rending as an but I'm not sure how to remove the bullet points?
Feedback is much appreciated.
Form
class GameScheduleForm(forms.Form):
weight_training_days = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple,
choices=(
(0, "MONDAY"),
(1, "TUESDAY"),
(2, "WEDNESDAY"),
(3, "THURSDAY"),
(4, "FRIDAY"),
(5, "SATURDAY"),
(6, "SUNDAY"),
),
)
cardio_training_days = forms.ChoiceField(widget=forms.CheckboxSelectMultiple,
choices=(
(0, "MONDAY"),
(1, "TUESDAY"),
(2, "WEDNESDAY"),
(3, "THURSDAY"),
(4, "FRIDAY"),
(5, "SATURDAY"),
(6, "SUNDAY"),
),
)
Template
{% extends "fitgames/fitgames_base.html" %}
{% block content %}
<div class="row-fluid">
<div class="well game span4 offset4">
<div class="row-fluid">
<h4 class="text-center">Total Body HIT</h4>
<p class="text-center">Select the days you can workout</p>
</div>
<div class="row-fluid">
<form method="post" action="{% url 'game_setup2_schedule' %}"> {% csrf_token %}
<div><strong>Select 3 Weight Training Days</strong></div>
<div>{{ form.weight_training_days}}</div>
<div><strong>Select 3 Cardio Days</strong></div>
<div>{{ form.cardio_training_days }}</div>
<div><button class="btn btn-primary btn-large" type="submit"> Next</button></div>
</form>
</div>
</div>
</div>
{% endblock %}
When forms.CheckboxSelectMultiple is rendered it is rendered in a ul tag . What you need to do is add the following to your css (making it more specific to that form as required):
ul
{
list-style-type: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With