forms.py and Bootstrap

Using Django Templates & Frontend
1

I’m trying to find what is causing the bootstrap class ‘form-control’ not to work. Bootstrap is working in the template on other parts of the page. See below.

NOT Working

image
image1279×448 22.6 KB

Using the same views.py file and commenting out one of two different form variables; one works and one does not.

  1. form = BostonPizzaOrderForm
  2. form = GroupOrderNumberForm < NOT Working>
@login_required(login_url='/login')
def GroupOrders(request):
  
  group_Orders = GroupOrderNumber.objects.all()
  # orderNumber = BostonPizzaOrder.order_Number
  # orderNumberQuery = GroupOrderQuery.order_NumberQuery
  
  form = GroupOrderNumberForm
  # form = BostonPizzaForm
  
  return render(request, 'meals/GroupOrders.html',
  {
  'group_Orders': group_Orders,
  # 'orderNumber': orderNumber,
  # 'orderNumberQuery': orderNumberQuery,
  'form': form,
  })

Working

image
image1285×511 19.5 KB

Working form Class

class BostonPizzaForm(ModelForm):
  class Meta: 
    model = BostonPizzaOrder
    # fields = "__all__"
    fields = (
    'order_Number',
    # 'user_name'
    'bpPasta',
    'bpSalad',
    'bpSaladDressing',
    'bpDrink',
    )
    # Not sure if I need labels if I'm styling my own .css
    labels = {
    # 'order_Number': 'Label',
    # 'bpPasta':'Choose your Pasta', 
    # 'bpSalad':'Choose your Salad', 
    # 'bpSaladDressing':'Choose your Salad Dressing', 
    # 'bpDrink':'Choose a Drink', 
    }
    
    # Widget Dictionary for styling.
    widgets = {
    #'user_name': forms.TextInput(attrs={'class':'text-input'}),
    'order_Number': forms.Select(
      attrs={
        'class' : 'form-control',
      }), 
    'bpPasta':forms.RadioSelect(
      attrs={
        'class':'check-input',
        # 'class':'form-check-input',
        'type':'checkbox',
        # 'class':'check',
      }), 
    'bpSalad':forms.RadioSelect(
      attrs={
      'class':'check-input',
      }), 
    'bpSaladDressing':forms.RadioSelect(
      attrs={
      'class':'check-input',
      }), 
    'bpDrink':forms.RadioSelect(
      attrs={
      'class':'check-input',
      }), 
    }

NOT Working form Class

class GroupOrderNumberForm(ModelForm):
  class Meta: 
    model = GroupOrderQuery
    # fields = "__all__"
    fields = ('order_NumberQuery',
    )

  widgets = {
    #'user_name': forms.TextInput(attrs={'class':'text-input'}),
    'order_NumberQuery': forms.Select(
      attrs = {
        'class' : 'form-control',
        }), 
    }
2

Hi mfones, a couple questions:

  • What does the template look like?
  • Using the inspection tool within the web browser development tools, what does the html look like?
  • Does bootstrap’s css require the form-control elements to exist within a form or something for it to render properly?
3

Hi Tim,

Weird, I copied the good widget over the suspected one and it works. I don’t know where the problem is though.

The template is not the issue, I think. :thinking: but here it is…

{% extends 'mealapp/base.html' %}
{% load static %}
{% block content %}

</br>
</br>
</br>
</br>
</br>
<div class="shadow p-4 mb-5 bg-body rounded">

  <h1>Group Orders ({{ OrderCount }})</h1>
  <!-- <strong>group_Orders</strong><br>{{ group_Orders }}<br><br> -->
  <!-- <strong>form.GroupOrderNumber</strong><br>{{ form.GroupOrderNumber }}<br><br> -->
  <!-- <strong>orderNumberQuery</strong><br>{{ orderNumberQuery }}<br><br> -->
  
  <strong>form.order_Number (BostonPizzaOrder)</strong><br>{{ form.order_Number }}<br><br>

  <strong>form.order_NumberQuery (GroupOrderNumberForm)</strong><br>{{ form.order_NumberQuery }}<br><br>
  
  <br>
  <br/>
  <table class="table table-hover">
    <thead>
      <tr class="table-dark">
        <th scope="col">Order Number</th>
        <th scope="col">Order Date</th>
        <th scope="col">Pick Up</th>
        <th scope="col">Restaurant</th>
        <th scope="col">Location</th>
      </tr>
    </thead>
    <tbody">
      <tr>
        {% for order in group_Orders %}
        <td>{{ order.GroupOrderNumber }}</td>
        <td>{{ order.OrderDate }}</td>
        <td>{{ order.PickUp }}</td>
        <td>{{ order.Restaurant }}</td>
        <td>{{ order.Restaurant.city }}</td>
        </td>
      </tr>
    </tbody>
    {% endfor %}
  </table>
  <br/>
</div>
  {% endblock %}

Here’s the inspection tool display for that section of code, now working.

image
image715×64 3.4 KB

[quote=“CodenameTim, post:2, topic:10483”]
Does bootstrap’s css require the form-control elements to exist within a form or something for it to render properly?

I assumed that the Widget would take care of that. And now that its working I think it does.

widgets = {
    #'user_name': forms.TextInput(attrs={'class':'text-input'}),
    'order_NumberQuery': forms.Select(
      attrs={
        'class' : 'form-control',
      }), 
    }

I’ll make some changes and see if I can get it to fail again. I must have missed a character or something that the dev server didn’t catch.