search

LesFruitsDefendus / saskatoon-ng

The new generation Saskatoon harverst management system
GNU Affero General Public License v3.0
10 stars 24 forks source link

Form validation styling issue with django-crispy-forms and bootstrap3 / bootstrap4 conflict #172

Open farhanmasud opened 2 years ago

farhanmasud commented 2 years ago

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 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 -

Screenshot from 2022-04-04 01-58-22

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.

Screenshot from 2022-04-04 02-02-56

nnabuihe-favour commented 2 years ago

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. les

farhanmasud commented 2 years ago

@nnabuihe-favour thanks for checking out the issue. Please discuss with @2ynn and @tristanlatr to get this issue assigned to you.

tristanlatr commented 2 years ago

Hi @nnabuihe-favour,

Please go ahead if you know how to handle this issue. But please write a complete description of what you have changed in the PR description :)

Thanks a lot!