I'm trying to create a form with radio button choices with Django. The website is designed in bootstrap 4 and for some reason, the buttons dissapear when the custom-control-input class is applied.
I have started with a static template that is rendering perfectly. The code for these button groups is the following:
<div class="form-group row">
<div class="col-sm-2">Sexo</div>
<div class="col-sm-10">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="sexo1" name="sexoRadios">
<label class="custom-control-label" for="sexo1">Mujer</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="sexo2" name="sexoRadios">
<label class="custom-control-label" for="sexo2">Hombre</label>
</div>
</div>
</div>
To create the form in Django, I have added this lines to the forms.py file:
sexo_choices=[('hombre','Hombre'),
('mujer','Mujer')]
sexo = forms.ChoiceField(choices=sexo_choices, widget=forms.RadioSelect(
attrs={'class':'custom-control-input'}
))
This makes the radio buttons to dissapear for some reason. If I analyze the HTML created by django, it seems quite similar to the static web.
<div class="form-group row">
<div class="col-sm-2">Sexo</div>
<div class="col-sm-10">
<div class="custom-control custom-radio">
<label for="id_sexo_0"><input type="radio" name="sexo" value="hombre" class="custom-control-input" id="id_sexo_0" required>Hombre</label>
</div>
<div class="custom-control custom-radio">
<label for="id_sexo_1"><input type="radio" name="sexo" value="mujer" class="custom-control-input" id="id_sexo_1" required>Mujer</label>
</div>
</div>
</div>
However, when I inspect the object with Google Chrome, I observe that the input tag has the following CSS attributes:
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
It seems the problem comes from the class of the label tag. Is there a way to assign a class to the label?
Thank you very much.
I managed to solve my problem. This is how I left the HTML template:
<div class="form-group row">
<div class="col-sm-2">Sexo</div>
<div class="col-sm-10">
{% for radio in form.sexo %}
<div class="custom-control custom-radio">
{{ radio.tag }}
<label class="custom-control-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
</div>
{% endfor %}
</div>
</div>
Thank you anyway. Regards
Maybe help someone: How to custom checkbox and radio in Django using Bootstrap
template.html
<!-- radio -->
<div class="form-group">
{{ form.field_name.label_tag }}
{% for pk, choice in form.field_name.field.widget.choices %}
<div class="custom-control custom-radio custom-control-inline">
<input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"
{% ifequal form.field_name.data pk.0 %}
checked="checked"
{% endifequal %}/>
<label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
</div>
{% endfor %}
</div>
<!-- checkbox -->
<div class="form-group">
{{ form.field_name.label_tag }}
{% for pk, choice in form.field_name.field.widget.choices %}
<div class="custom-control custom-checkbox custom-control-inline">
<input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"
{% ifequal form.field_name.data pk.0 %}
checked="checked"
{% endifequal %}/>
<label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
</div>
{% endfor %}
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.