Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
`form-control` HTML class not present in `django-crispy-forms==1.14.0`
See original GitHub issue- Package version: django-crispy-forms==1.14.0
- Django version: Django==4.0.4
- Python version: Python 3.9.10
- Template pack: (Optional)
Description:
What is the purpose of the form-control HTML class and when should it appear? I tried to upgrade from django-crispy-forms==1.13.0 to django-crispy-forms==1.14.0 but I noticed that some elements that contained class form-control with django-crispy-forms==1.13.0, didn’t contain this class with django-crispy-forms==1.14.0, and that broke our CSS (We have a selector .form-control.numberinput). I also noticed that the class form-control is used by CSS selectors many times, so is it a good idea to remove it?
Preferably also include:
- Example Django Crispy Forms code
- Screenshots
- Actual HTML generated
- Elements with class
numberinputdon’t contain the classform-controlany more.
<form action="/matches/settings/about-my-match/" method="post" class="">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<div class="row justify-content-center">
<div class="col-12 col-md-7">
<strong>Update matches</strong>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-7">
<div class="row">
<div class="col flex-grow-0 flex-md-grow-1 dropdown">
<button type="button" class="form-control dropdown-toggle diet-button" data-toggle="dropdown">
Diet <span class="caret"></span>
</button>
<div class="dropdown-menu diet-menu">
<div class="widget-json-dropdown">
<div class="widget-json">
<div class="widget-group" data-value="1">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Vegan</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="2">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Vegetarian</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="3">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Carnist</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<input type="hidden" value="{"1": 5, "2": 4, "3": 3}" name="diet_match" class="widget-input" />
</div>
<input type="hidden" name="initial-diet_match" value="{"1": 5, "2": 4, "3": 3}" id="initial-id_diet_match">
</div>
</div>
</div>
<div class="col-12 col-md-7 mt-1 mt-md-0">
<div class="row age-row">
<div class="col-3 text-right">
<div class="form-control-static mt-1">Age:</div>
</div>
<div class="col-4 d-flex justify-content-center">
<input type="number" name="min_age_to_match" value="0" class="numberinput" required id="id_min_age_to_match"><input type="hidden" name="initial-min_age_to_match" value="0" id="initial-id_min_age_to_match">
</div>
<div class="col-1 d-flex justify-content-center px-0 dash">
<div class="form-control-static mt-1">–</div>
</div>
<div class="col-4 d-flex justify-content-center">
<input type="number" name="max_age_to_match" value="180" class="numberinput" required id="id_max_age_to_match"><input type="hidden" name="initial-max_age_to_match" value="180" id="initial-id_max_age_to_match">
</div>
</div>
</div>
<div class="col mt-1 mt-md-0">
<input type="submit" class="btn btn-block btn-primary btn-arrow-right match-list-refresh-button" value="Refresh" />
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="/matches/settings/" class="btn btn-default">
Add more options
</a>
</div>
<div class="hidden">
<div class="activation-form-field text-left flip">
<div>
<label>Gender to match:</label>
</div>
<div id="id_gender_to_match"><div>
<label for="id_gender_to_match_0"><input type="checkbox" name="gender_to_match" value="1" id="id_gender_to_match_0">
Female</label>
</div><div>
<label for="id_gender_to_match_1"><input type="checkbox" name="gender_to_match" value="2" id="id_gender_to_match_1" checked>
Male</label>
</div><div>
<label for="id_gender_to_match_2"><input type="checkbox" name="gender_to_match" value="3" id="id_gender_to_match_2">
Other</label>
</div>
</div>
</div>
<div class="activation-form-field text-left flip">
<div>
<label for="id_match_description_en">My ideal match:</label>
</div>
<textarea name="match_description_en" cols="40" rows="6" maxlength="50000" required id="id_match_description_en">
`</textarea>
</div>
<div class="activation-form-field text-left flip">
<div>
<label>Smoking status match:</label>
</div>
<div class="widget-json">
<div class="widget-group" data-value="1">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Not smoking</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="2">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Smoking occasionally</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="3">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Smoking</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<input type="hidden" value="{"1": 5, "2": 4, "3": 1}" name="smoking_status_match" class="widget-input" />
</div>
<input type="hidden" name="initial-smoking_status_match" value="{"1": 5, "2": 4, "3": 1}" id="initial-id_smoking_status_match">
</div>
<div class="activation-form-field text-left flip">
<div>
<label>Relationship status match:</label>
</div>
<div class="widget-json">
<div class="widget-group" data-value="1">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Single</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="2">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Divorced</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="3">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Widowed</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="4">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">In a relationship</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="5">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">In an open relationship</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="6">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">It's complicated</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="7">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Separated</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="8">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Engaged</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="9">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Married</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<input type="hidden" value="{"1": 5, "2": 5, "3": 5, "4": 5, "5": 5, "6": 5, "7": 2, "8": 2, "9": 2}" name="relationship_status_match" class="widget-input" />
</div>
<input type="hidden" name="initial-relationship_status_match" value="{"1": 5, "2": 5, "3": 5, "4": 5, "5": 5, "6": 5, "7": 2, "8": 2, "9": 2}" id="initial-id_relationship_status_match">
</div>
</div>
</form>
- Expected HTML
- Elements with class
numberinputcontain the classform-control. (this works withdjango-crispy-forms==1.13.0)
<form action="/matches/settings/about-my-match/" method="post" class="">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<div class="row justify-content-center">
<div class="col-12 col-md-7">
<strong>Update matches</strong>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-7">
<div class="row">
<div class="col flex-grow-0 flex-md-grow-1 dropdown">
<button type="button" class="form-control dropdown-toggle diet-button" data-toggle="dropdown">
Diet <span class="caret"></span>
</button>
<div class="dropdown-menu diet-menu">
<div class="widget-json-dropdown">
<div class="widget-json">
<div class="widget-group" data-value="1">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Vegan</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="2">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Vegetarian</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="3">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Carnist</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<input type="hidden" value="{"1": 5, "2": 4, "3": 3}" name="diet_match" class="widget-input" />
</div>
<input type="hidden" name="initial-diet_match" value="{"1": 5, "2": 4, "3": 3}" id="initial-id_diet_match">
</div>
</div>
</div>
<div class="col-12 col-md-7 mt-1 mt-md-0">
<div class="row age-row">
<div class="col-3 text-right">
<div class="form-control-static mt-1">Age:</div>
</div>
<div class="col-4 d-flex justify-content-center">
<input type="number" name="min_age_to_match" value="0" class="numberinput form-control" required id="id_min_age_to_match"><input type="hidden" name="initial-min_age_to_match" value="0" id="initial-id_min_age_to_match">
</div>
<div class="col-1 d-flex justify-content-center px-0 dash">
<div class="form-control-static mt-1">–</div>
</div>
<div class="col-4 d-flex justify-content-center">
<input type="number" name="max_age_to_match" value="180" class="numberinput form-control" required id="id_max_age_to_match"><input type="hidden" name="initial-max_age_to_match" value="180" id="initial-id_max_age_to_match">
</div>
</div>
</div>
<div class="col mt-1 mt-md-0">
<input type="submit" class="btn btn-block btn-primary btn-arrow-right match-list-refresh-button" value="Refresh" />
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="/matches/settings/" class="btn btn-default">
Add more options
</a>
</div>
<div class="hidden">
<div class="activation-form-field text-left flip">
<div>
<label>Gender to match:</label>
</div>
<div id="id_gender_to_match"><div>
<label for="id_gender_to_match_0"><input type="checkbox" name="gender_to_match" value="1" id="id_gender_to_match_0">
Female</label>
</div><div>
<label for="id_gender_to_match_1"><input type="checkbox" name="gender_to_match" value="2" id="id_gender_to_match_1" checked>
Male</label>
</div><div>
<label for="id_gender_to_match_2"><input type="checkbox" name="gender_to_match" value="3" id="id_gender_to_match_2">
Other</label>
</div>
</div>
</div>
<div class="activation-form-field text-left flip">
<div>
<label for="id_match_description_en">My ideal match:</label>
</div>
<textarea name="match_description_en" cols="40" rows="6" maxlength="50000" required id="id_match_description_en">
`</textarea>
</div>
<div class="activation-form-field text-left flip">
<div>
<label>Smoking status match:</label>
</div>
<div class="widget-json">
<div class="widget-group" data-value="1">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Not smoking</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="2">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Smoking occasionally</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="3">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Smoking</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<input type="hidden" value="{"1": 5, "2": 4, "3": 1}" name="smoking_status_match" class="widget-input" />
</div>
<input type="hidden" name="initial-smoking_status_match" value="{"1": 5, "2": 4, "3": 1}" id="initial-id_smoking_status_match">
</div>
<div class="activation-form-field text-left flip">
<div>
<label>Relationship status match:</label>
</div>
<div class="widget-json">
<div class="widget-group" data-value="1">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Single</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="2">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Divorced</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="3">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Widowed</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="4">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">In a relationship</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="5">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">In an open relationship</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="6">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">It's complicated</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="7">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Separated</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="8">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Engaged</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="widget-group" data-value="9">
<input type="checkbox" class="widget-checkbox" checked="checked" />
<span class="choice-text">Married</span>
<span class="choices pull-right flip">
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="1" title="One heart"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="2" title="Two hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="3" title="Three hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="4" title="Four hearts"></i>
<i class="fas fa-heart widget-choice" aria-hidden="true" data-value="5" title="Five hearts"></i>
</span>
<div class="clearfix"></div>
</div>
<input type="hidden" value="{"1": 5, "2": 5, "3": 5, "4": 5, "5": 5, "6": 5, "7": 2, "8": 2, "9": 2}" name="relationship_status_match" class="widget-input" />
</div>
<input type="hidden" name="initial-relationship_status_match" value="{"1": 5, "2": 5, "3": 5, "4": 5, "5": 5, "6": 5, "7": 2, "8": 2, "9": 2}" id="initial-id_relationship_status_match">
</div>
</div>
</form>
Issue Analytics
- State:
- Created a year ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
classes related with form control classes are not functioning ...
1) There are no such classes as .form-control-success, .form-control-danger etc specified in Bootstrap 4. You may add them to your own ...
Read more >FormControl - Angular
class final ... Tracks the value and validation status of an individual form control. ... Construct a FormControl with no initial value or...
Read more >FormGroup and FormControl in Angular - LogRocket Blog
In this tutorial, we'll show you how to divide form controls by form groups ... FormControl is a class in Angular that tracks...
Read more >Forms - Bootstrap
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Read more >5 tips on using Angular FormControl | by Alain Chautard
In the component class, all we need is: myControl = new FormControl('default value');. And in our HTML template:
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi @uri-rodberg
I’m not expecting any changes to the html output here between these versions so looks like a bug in this version.
Got a bit of work elsewhere for the next bit of time ahead of Django 4.1 feature freeze then I’m planning to come back and spend a bit of time on crispy-forms and co.
If you had capacity, a PR even with just a test showing the regression in the meantime would of course be very welcome.
Thanks
I’ve noticed this issue too a few days ago. My solution for now is to set it in
self.helper.layout = Layout(...)- manageable for smaller forms and I don’t need to touch the template and continue to render with just{% crispy form %}:(Yes I know, we should upgrade from Bootstrap 3…)