Tips for improving the styling of a django form with mixed elements

Question

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with:

class InitialForm(Form):
    trn = IntegerField(widget=NumberInput, required = False)
    klient = ChoiceField(choices=KLIENTS, required = False)

class SecondForm(Form):
    faktura = CharField(max_length = 200, required=False)

For these forms, I am combining Django forms with pure HTML select elements in order to access data from a database.

<form method="POST" novalidate>
        {% csrf_token %}

        <label for="{{ form.klient.id_for_label }}">Klient:&nbsp;&nbsp;&nbsp;&nbsp;</label>
        {{ form.klient }}
        <br><br>

        <label for="programs">Program: </label>
        <select id="programselect" name="programs">
        {% for option in options %}
            <option value="{{ option.0}}">{{ option.1 }}</option>
        {% endfor %}
        </select>
        <br><br>

        <label for="{{ form.trn.id_for_label }}">Trn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </label>
        {{ form.trn }}
        <br><br>

        <label for="{{ form2.faktura.id_for_label }}">Faktura:&nbsp;&nbsp;</label>
        {{ form2.faktura }}
        <br>

        <button type="submit" class="btn btn-secondary">Search</button>
</form>

To format the inputs one above the other, I initially used &nbsp&. What would be the better way to style this using CSS?

css django django-forms

Answer 1

Answer №1

If you are using the crispy template pack for styling, a helpful approach would be to create a model form class that populates the "programs" field with initial options from the database by executing a query on the relevant model storing the data. Below is an example code snippet, assuming certain aspects of your database schema:

        class ProgramForm(forms.ModelForm):
            class Meta: 
                fields = ['program']
                model = MyRecord

            def __init__(self, *args, **kwargs):
                super(ProgramForm, self).__init__(*args, **kwargs)
                self.fields['program'].queryset = Option.objects.filter(some_field=True).order_by("option_name")

By implementing this solution, the backend model form class takes care of providing the option data, while all styling can be managed in the HTML using crispy. If you are working with different forms, remember to pass them to your template with distinct identifiers:

{{form.klient|as_crispy_field}}
{{program_form.program|as_crispy_field}}

Furthermore, Django's widgets can enhance the functionality of your options selector, such as incorporating checkboxes instead of a dropdown select (in cases of ForeignKey vs M2M relationships).

In situations where restructuring the code or utilizing alternative methodologies is not possible and you must adhere to the existing HTML structure and backend process, CSS can still be employed to target specific elements within the form. Here is an example:

<style>
#this-label span {
        margin-right: 100px;
    }
</style>

<label for="{{ form.trn.id_for_label }}" id="this-label"> <span>Trn:</span> </label>

This snippet will create spacing to the right of "Trn:". While this serves as just one method, additional classes can be assigned to target multiple similar tags.

Answer 2

If you are using the crispy template pack for styling, a helpful approach would be to create a model form class that populates the "programs" field with initial options from the database by executing a query on the relevant model storing the data. Below is an example code snippet, assuming certain aspects of your database schema:

        class ProgramForm(forms.ModelForm):
            class Meta: 
                fields = ['program']
                model = MyRecord

            def __init__(self, *args, **kwargs):
                super(ProgramForm, self).__init__(*args, **kwargs)
                self.fields['program'].queryset = Option.objects.filter(some_field=True).order_by("option_name")

By implementing this solution, the backend model form class takes care of providing the option data, while all styling can be managed in the HTML using crispy. If you are working with different forms, remember to pass them to your template with distinct identifiers:

{{form.klient|as_crispy_field}}
{{program_form.program|as_crispy_field}}

Furthermore, Django's widgets can enhance the functionality of your options selector, such as incorporating checkboxes instead of a dropdown select (in cases of ForeignKey vs M2M relationships).

In situations where restructuring the code or utilizing alternative methodologies is not possible and you must adhere to the existing HTML structure and backend process, CSS can still be employed to target specific elements within the form. Here is an example:

<style>
#this-label span {
        margin-right: 100px;
    }
</style>

<label for="{{ form.trn.id_for_label }}" id="this-label"> <span>Trn:</span> </label>

This snippet will create spacing to the right of "Trn:". While this serves as just one method, additional classes can be assigned to target multiple similar tags.

Tips for improving the styling of a django form with mixed elements

Answer №1

Similar questions

use jquery to dynamically switch CSS class on navigation with animated arrows

Encountered a MySQL error while attempting to insert an image into the database

Combining various components within an inactive element tag using Vue

Strategies for reducing the execution time of a loop

Converting dynamic content within a div into an interactive link

Eliminate the empty choice for Angular when dealing with dynamic option objects

Revolutionizing Zen Cart with slimMenu

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

Troubleshooting border-left and td alignment problems in an HTML email displayed in Outlook 2013

How do I incorporate scrolling into Material-UI Tabs?

I haven't quite reached success yet, but I am working on getting my slideshow to display on my local server

Using JavaScript (without jQuery), take away the CSS class from an element

Concealing div containers and eliminating gaps

The navigation bar is positioned with white space above it

Bidirectional updates in AngularJS with CSS styling

What is the best way to access attributes from a div element?

Tips for layering one div on top of another div

Altering the placement of a single element from floating to fixed positioning in CSS

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb