Forums

Django forms not crispy

I have a web app using django crispy forms. The app displays forms crispy style when I run it on my local machine using runserver. However, when I run the app on pythonanywhere the forms are not rendered as crispy forms but as default django forms.

I installed crispy forms using pip install --upgrade django-crispy-forms.

Is there a publicly-visible URL where we can see a form with the incorrect styling?

Hi Giles, thanks for your reply.

You can go to drziff.pythonanywhere.com/lettsom and log in as user: guest pwd: camberwell

Go to Orders and click on an order, then click Add Item

The generated HTML on my local system is:

<form method="post" > <input type="hidden" name="csrfmiddlewaretoken" value="mytoken"> <div id="div_id_product" class="form-group"> <label for="id_product" class="control-label requiredField">Product<span class="asteriskField"></span></label> <div class="controls "> <select name="product" class="select form-control" required id="id_product"> <option value="" selected>---------</option> <option value="6">Some good stuff to make things grow better</option> <option value="3">shannons stuff</option> <option value="2">some stuff</option></select> </div> </div> <div id="div_id_quantity" class="form-group"> <label for="id_quantity" class="control-label requiredField"> Quantity<span class="asteriskField"></span> </label> <div class="controls "> <input type="number" name="quantity" value="1" class="numberinput form-control" required id="id_quantity"> </div> </div> <div class="form-group"> <div class="controls "> <input type="submit" name="save" value="Submit" class="btn btn-primary btn btn-secondary btn-sm" id="submit-id-save" /> <a role="button" class="btn btn-secondary btn-sm" href="/orders/order_items/8/">Cancel</a> </div></div> </form>

The differences I can see are that the div-id-product class is 'form-group' on the crispy form and 'control-group' on this (non-crispy) form, and each of the controls on the crispy form has an additional class of 'form-control'.

Right, I see what you mean. Perhaps it's a version mismatch? You can find out which version you have installed locally by running

pip show django-crispy-forms

The equivalent on PythonAnywhere (because your website is using Python 3.7) is

pip3.7 show django-crispy-forms

Hi, So i runs the on my local machine and i got this

pip show django-crispy-forms

Name: django-crispy-forms Version: 2.1 Summary: Best way to have Django DRY forms

But in the pythonanywhere web console I got

Name: django-crispy-forms Version: 2.0 Summary: Best way to have Django DRY forms

So how to upgrade in pythonanywhere , or if it's not possible how to downgrade my local one?

See https://help.pythonanywhere.com/pages/InstallingNewModules/

So i have upgraded to django-crispy-forms Version 2.1 by using pip install --upgrade django-crispy-forms

Now I got on local machine Name: django-crispy-forms Version: 2.1 Summary: Best way to have Django DRY forms

and on the pythonanywhere link Name: django-crispy-forms Version: 2.1

But still can not update the crispy form ... but it works on registration page

Confused!

If it's working on the registration page, then it's installed correctly and you will need to debug why it is not working anywhere else.

Here is my login page link

https://mathkh.pythonanywhere.com/login/

And here is my registration page link

https://mathkh.pythonanywhere.com/register/

In both cases, I have used the crispy form ... but the registration page is working properly, the login page can not load the crispy form. What might be the problem?

In the local machine, everything is fine, but online in python anywhere it does not work. Any guidance?

What do you see in your web app logs?

We have

Access log: Error log: Server log:

Which one I should look for errors?

On the Access log: 49.0.72.47 - - [02/Nov/2023:06:36:32 +0000] "POST /login/ HTTP/1.1" 200 10618 "https://mathkh.pythonanywhere.com/login/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36" "49.0.72.47" response-time=0.005

Error log: 2023-11-02 12:36:30,797: Not Found: /favicon.ico I think this is not an issue

Server Log: Giving something like this 2023-11-02 12:36:22 gracefully (RE)spawned uWSGI master process (pid: 1) 2023-11-02 12:36:22 spawned uWSGI worker 1 (pid: 2, cores: 1) 2023-11-02 12:36:22 metrics collector thread started 2023-11-02 12:36:22 spawned 2 offload threads for uWSGI worker 1 2023-11-02 12:36:30 announcing my loyalty to the Emperor... 2023-11-02 12:36:30 Not Found: /favicon.ico

I see that both of your pages have git markers that indicate that you needed to do a manual merge, but you just have those markers in the file. Here is an example, but there are others:

<<<<<<< HEAD
      display: none;
    }
    #kaitalooDropdown {
      display: none;
    }
    #starterDropdown{
      display: none;
=======
      display: inline-block;
    }
    #kaitalooDropdown {
      display: inline-block;
    }
    #starterDropdown{
      display: inline-flexbox;
>>>>>>> 8a78dcb18cd8a1d35fe22d53258398e3b6492ea3

My guess is that, in the page that is not working, one of them is in a place that breaks it. You need to work through all of them and make sure that you have valid html and css there.