style in modal (form)

Using Django Templates & Frontend
1

Can someone help me with information about styles in a form?

I have a form which I open through a modal, the problem is that I want to create a certain style.

This is what I get now:

image
image707×573 21.5 KB

For example, I would like the Reason section (it is a CheckboxSelectMultiple) to appear ordered and without overlapping with everything.

thank you

2

You style a form pretty much the same way you style anything else. Typically, you assign the appropriate css classes to the form elements, with those css classes defined in a .css file.

How this is done depends upon how you’re rendering your form fields. If you’re rendering the fields manually, you can specify classes in the attrs argument to the widget. If you’re using a Crispy layout, you specify the css_class on the element.

For us to provide more specific details, we’d need to see the form and how you’re rendering it. (For example, specifying attributes for a widget in a ModelForm is slightly different than how you would do it on a regular form.)

3

I am using a modal and in the forms.py file I have something like this:

widgets = {
            'num_reclamacion': forms.TextInput(
                attrs = {
                    'class': 'form-control',
                    'placeholder': 'Nº reclamacion',
                }
            ),
            'motivo': forms.RadioSelect(
                attrs = {
                    'placeholder': 'Motivo reclamacion',
                }
            ),

My modal:

<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Creacion de Reclamación</h2>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form id="form_creacion" action="{% url 'registrar_reclamacion' %}" method="POST">
            {% csrf_token %}
            <div class="modal-body">
                <div id="errores">

                </div>
                {{ form.as_p }}
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" type="button" onclick="cerrar_modal_creacion();">Cancelar</button>
                <button id="boton_creacion" class="btn btn-primary" type="button" onclick="registrar();">Confirmar</button>
            </div>
        </form>
    </div>
</div>
4

You may end up needing to specify widgets in your widgets dict for all the fields you need to add classes to.

Whether you have css classes already available to you depends upon whether you’re using a css framework such as tailwind or bootstrap, or if you need to create your own css classes.

5

I’m using bootstrap and the style seems fine to me, the problem is that I don’t know how to put, for example, two fields in the same row, or three… mostly structure it as I want but following the style it has.

6

Well I already found a way where I can create more of the style. Thank you so much.