You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
bootstrap4 template pack of django-crispy-forms uses the CSS class invalid-feedback for rendering error messages under a field which doesn't exist in bootstrap v3. Bootstrap v3 uses the CSS class help-block for rendering the error messages instead.
As the templates use bootstrap v3, when django-crispy-forms with 'bootstrap4' template pack is rendering error message with invalid-feedback CSS class, it's not displaying with the CSS styling required to show the error messages [for example, red color for font].
This came up while implementing the validations for phone field with as mentioned on #116 with django-phone-field on the Property model. Example screenshot provided below -
Here the error message Only E164 numbers are supported here (+12223334444). shows up in bold black text which was supposed to be in CSS classes to show errors in red font. Here the bootstrap4 class applied is invalid-feedback but since bootstrap3 doesn't come with this class, it's not showing up.
If I change the CRISPY_TEMPLATE_PACK variable to bootstrap3, it breaks the form, it's unable to render the two fields correctly that are in PhoneField. This particular case might be related to a different issue but I'm noting it here to demonstrate this particular scenario.
The text was updated successfully, but these errors were encountered:
Hello @farhanmasud, clearly this problem results from the bootstrap conflicts. clearly Django does not load the bootstrap 3 CSS files on this page because crispy is using bootstrap4. I've figured out a fix for it and that is if i would kindly be assigned the issue.
This front-end HTML template currently uses bootstrap v3 and in the settings file, the
CRISPY_TEMPLATE_PACK
variable is currently set to'bootstrap4'
.bootstrap4
template pack of django-crispy-forms uses the CSS classinvalid-feedback
for rendering error messages under a field which doesn't exist in bootstrap v3. Bootstrap v3 uses the CSS classhelp-block
for rendering the error messages instead.As the templates use bootstrap v3, when django-crispy-forms with
'bootstrap4'
template pack is rendering error message withinvalid-feedback
CSS class, it's not displaying with the CSS styling required to show the error messages [for example, red color for font].This came up while implementing the validations for phone field with as mentioned on #116 with django-phone-field on the
Property
model. Example screenshot provided below -Here the error message
Only E164 numbers are supported here (+12223334444).
shows up in bold black text which was supposed to be in CSS classes to show errors in red font. Here the bootstrap4 class applied isinvalid-feedback
but since bootstrap3 doesn't come with this class, it's not showing up.If I change the
CRISPY_TEMPLATE_PACK
variable tobootstrap3
, it breaks the form, it's unable to render the two fields correctly that are inPhoneField
. This particular case might be related to a different issue but I'm noting it here to demonstrate this particular scenario.The text was updated successfully, but these errors were encountered: