Как мне увеличить размер Django формы - PullRequest
0 голосов
/ 29 февраля 2020

Это мой первый проект, использующий Django. Я создаю форму следующим образом, и, как вы можете видеть на скриншоте ниже, форма слишком узкая. Я бы хотел, чтобы поля ввода были go по всему экрану, что невозможно, когда форма такая узкая. Как я могу увеличить ширину формы?

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'))

и

{% 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 %}

enter image description here

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

Для управления отображением веб-страницы необходимо использовать CSS. В вашем случае вы захотите использовать свойство width. Нечто подобное должно работать для вас:

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

Это установит ширину формы с идентификатором id-addSnippet равной 100% содержащего ее блока.

См. этот ответ для более подробной информации о том, что означает width: 100%.

0 голосов
/ 29 февраля 2020

Будет ли это wrapper_class для ваших элементов ввода? У вас есть класс загрузочного ремешка col-md-6, который занимает половину доступного пространства, может быть, попробуйте col-md-12 ???

...