Home > front end >  How do I make the formset inherit the styles of the form? I mean, how do I style the formset in Djan
How do I make the formset inherit the styles of the form? I mean, how do I style the formset in Djan

Time:11-11

I have a problem; I want to put the styles to my formset because it does not inherit them from the main form and the design looks horrible, I don't know how to fix it or if there is a type of widget to make the fields look better. Thank you so much

Parte/forms.py

from django import forms
from django.forms import formset_factory

from .models import Parte


class ParteForm(forms.ModelForm):
    class Meta:
        model=Parte
        fields=['codigo','descripcion','quantity','unit_price','total_price','tax_free']

Presupuestos/forms.py

class PresupuestosParteForm(forms.ModelForm):
    class Meta:
        model = Parte
        fields = '__all__'
        widgets = {
            'codigo': forms.TextInput(
                attrs={
                    'class': 'form-control'
                }
            ),
            'quantity': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                }
            ),
            'unit_price': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                    'onchange': 'multiplicar()',
                }
            ),
            'total_price': forms.NumberInput(
                attrs={
                    'class': 'form-control',

                }
            ),
            'tax_free': forms.CheckboxInput(
                attrs={
                    'class': 'form-check-input',
                    'onclick': 'taxes_free(multiplicar())',
                }
            ),
            'descripcion': forms.TextInput(
                attrs={
                    'class': 'form-control'
                }
            ),
            'descuento': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                    'onchange': 'totales()',

                }
            ),
            'total': forms.NumberInput(
                attrs={
                    'class': 'form-control',
                }
            ),

        }


ParteFormSet = formset_factory(ParteForm, extra=1)

Presupuestos/views.py

def create_Presupuestos(request):
   #Crear cada uno de los formularios y reunirlos
   presupuestosclientesform=PresupuestosClientesForm(request.POST or None)
   presupuestosvehiculosform=PresupuestosVehiculosForm(request.POST or None)
   presupuestosparteform=PresupuestosParteForm(request.POST or None)
   presupuestosmanoobraform=PresupuestosManoObraForm(request.POST or None)
   presupuestospagosform=PresupuestosPagosForm(request.POST or None)

   #Creación del formset de parteform

   if request.method == 'POST':
       formset = ParteFormSet(request.POST)
       if formset.is_valid():
           # extract name from each form and save
           pass
       else:
           formset = ParteFormSet()
   else:
       formset = ParteFormSet()


   if presupuestosclientesform.is_valid():
       presupuestosclientesform.save()
       return redirect('presupuestos:index')
   return render(request,'Presupuestos/presupuestos-forms.html',{'presupuestosclientesform':presupuestosclientesform,'presupuestosvehiculosform':presupuestosvehiculosform, 'presupuestosparteform':presupuestosparteform, 'presupuestosmanoobraform':presupuestosmanoobraform,'presupuestospagosform':presupuestospagosform,'formset':formset})

presupuestos-forms.html

                                                                            <table class="table table-bordered table-nowrap align-middle" id="childTable1">
                                                                                <thead class="table-info">
                                                                                  <tr>
                                                                                    <th scope="col">Código</th>
                                                                                    <th scope="col">Descripción</th>
                                                                                    <th scope="col">Cantidad</th>
                                                                                    <th scope="col">Precio Unitario</th>
                                                                                    <th scope="col">Precio Total</th>
                                                                                    <th scope="col">Libre de Impuestos</th>
                                                                                    <th scope="col">Agrega Fila</th>
                                                                                  </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                  <tr>
                                                                                    <td>
                                                                                        {{presupuestosparteform.codigo}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.descripcion}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.quantity}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.unit_price}}
                                                                                    </td>
                                                                                    <td>
                                                                                      {{presupuestosparteform.total_price}}
                                                                                    </td>
                                                                                    <td>
                                                                                        <div>
                                                                                            {{presupuestosparteform.tax_free}}
                                                                                        </div>
                                                                                    </td>
                                                                                    <td>
                                                                                      <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value=" " />
                                                                                    </td>
                                                                                  </tr>
                                                                                    <tr>
                                                                                    {{ formset.management_form }}
                                                                                    {% for form in formset %}
                                                                                        <td>
                                                                                            <div>{{ form.codigo }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.descripcion }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.quantity }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.unit_price }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.total_price }}</div>
                                                                                        </td>
                                                                                        <td>
                                                                                            <div>{{ form.tax_free }}</div>
                                                                                        </td>

                                                                                    {% endfor %}
                                                                                    </tr>
                                                                                </tbody>
                                                                              </table>

enter image description here

With crispy

enter image description here

CodePudding user response:

Another option you can look into is django-widget-tweaks. it lets you do your styling right there in the template.django-widget-tweaks

CodePudding user response:

Another way you can update the form with inline widget like below :-

class PresupuestosParteForm(forms.ModelForm):
    codigo = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'codigo', 'class': 'form-control'}))
    quantity = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'quantity', 'class': 'form-control'}))
    unit_price = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'unit_price', 'class': 'form-control', 'onchange': 'multiplicar()'}))
    total_price = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'total_price', 'class': 'form-control'}))
    tax_free = forms.CharField(widget=forms.CheckboxInput(attrs={'placeholder': 'tax_free', 'class': 'form-check-input','onclick': 'taxes_free(multiplicar())'}))
    descripcion = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'descripcion', 'class': 'form-control'}))
    descuento = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'descuento', 'class': 'form-control', 'onchange': 'totales()'}))
    total = forms.CharField(widget=forms.NumberInput(attrs={'placeholder': 'total', 'class': 'form-control'}))

    class Meta:
        model = Parte
        fields = '__all__'
  • Related