How do I increase the size of a Django form

Question

This is my first project using Django. I am creating a form as follows and as you can see on the screenshot below, the form is just too narrow. I'd like the input fields to go across the whole screen which is not possible when the form is that narrow. How can I increase the width of the form?

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Row, Field
from ..models import EvilSnippet

class AddSnippet(forms.Form):

class Meta:
    model = EvilSnippet

code_language = forms.ChoiceField(
    label = "Select Language",
    choices = (("Java", "Java"), ("Python", "Python"), ("C#", "C#")),
    required = True,
)

severity = forms.ChoiceField(
    label = "Severity",
    choices = (("HIGH", "HIGH"), ("MEDIUM", "MEDIUM"), ("LOW", "LOW")),
    required = True,
)

description = forms.CharField(
    label = "Description",
    required = False,
    #widget=forms.TextInput(attrs={'size': '20'})
)

code = forms.CharField(
    label = "Code",
    required = False,
    widget=forms.Textarea()
)

def __init__(self, *args, **kwargs):
    super(AddSnippet, self).__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.form_id = 'id-addSnippet'
    self.helper.form_class = 'uniForms'
    self.helper.form_method = 'post'
    self.helper.form_action = 'submit_snippet'

    self.helper.layout = Layout(
        Row(
            Field('code_language', wrapper_class='col-md-6'),
        ),
        Row(
            Field('severity', wrapper_class='col-md-6'),
        ),
        Row(
            Field('description', wrapper_class='col-md-6'),
        ),
        Row(
            Field('code', wrapper_class='col-md-6'),
        )
    )

    self.helper.add_input(Submit('submit', 'Submit'))

and

{% extends 'base.html' %}
{% load crispy_forms_tags %}


{% block content %}
<!-- <form action = '' method="post"> -->
<!-- Very Important csrf Token -->
 {% csrf_token %}
 <!-- <table> -->
     {% crispy form %}
 <!-- </table> -->
<!-- </form> -->
{% endblock %}

For this you'll need some CSS styling. Look into the width property. Something like `form#id-addSnippet { width: 100%;}` — kimbo, Feb 29 '20 at 00:11
I'm glad it worked for you! I posted my comment as an answer, feel free to mark it as accepted. You might also consider adding the `css` tag to your question. — kimbo, Feb 29 '20 at 00:27

score 1 · Accepted Answer · answered Feb 29 '20 at 00:26

To control the display of a webpage, you need to use CSS. For you case, you'll want to use the width property. Something like this should work for you:

form#id-addSnippet {
    width: 100%;
}

This will set the width of the form with id id-addSnippet to 100% of its containing block.

See this answer for more details about what width: 100% means.

score 0 · Answer 2 · answered Feb 29 '20 at 00:10

0

Would it be your wrapper_class for your input elements? You have the boot strap class col-md-6 which takes half of the available space maybe try col-md-12???

answered Feb 29 '20 at 00:10

BerryCoder

43
1
1
5

How do I increase the size of a Django form

2 Answers2