我如何增加Django表单的大小

问题描述 投票:0回答:2

这是我使用Django的第一个项目。我正在创建一个表单,如下所示,您可以在下面的屏幕截图中看到,该表单太窄了。我希望输入字段能够遍历整个屏幕,而当表格那么窄时是不可能的。如何增加表格的宽度?

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

python django django-crispy-forms
2个回答
0
投票

输入元素是wrapper_class吗?您的引导带类col-md-6占用了一半的可用空间,请尝试col-md-12 ???


0
投票

要控制网页的显示,您需要使用CSS。对于您而言,您将需要使用width属性。这样的事情应该适合您:

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

这会将ID为id-addSnippet的表单的宽度设置为其包含块的100%。

有关this answer的含义的更多详细信息,请参见width: 100%。>

© www.soinside.com 2019 - 2024. All rights reserved.