Question

我使用django表格创建了一个模态框。我正在使用django crispy form来美化表单显示。以下是用于显示表单的html文件：

<div id="ApplyJob" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Apply for {{ data.job_title }} position</h4>
                </div>
            </div>
            <form action="" method="post" enctype='multipart/form-data'> {% csrf_token %}
                <div class="modal-body">
                    {{ form|crispy }}
                    {#<input type="submit" value="Apply" />#}
                </div>
                <div class="modal-footer">
                    <input type="submit" value="Apply" class="btn btn-primary"/>
                </div>
            </form>
        </div>
    </div>
</div>

Crispy表格按照预期美化了我的表格，但输入框的大小都比较宽。有没有办法减小输入框的大小？我试过添加'sm-4'但它减小了输入框的大小而不是模态框。

我的forms.py文件如下：

class Upload_resume(forms.Form):
    f_name = forms.CharField(label='First Name', max_length=64,
                            widget=forms.TextInput({
                                   'class': 'form-control',
                                   'placeholder': 'First name'}),
                            required=True)
    s_name = forms.CharField(label='Sur Name / Second Name', max_length=64,
                             widget=forms.TextInput({
                                   'class': 'form-control',
                                   'placeholder': 'Second name'}),
                             required=True)
    email = forms.EmailField(max_length=64,
                             widget=forms.EmailInput({
                                   'class': 'form-control',
                                   'placeholder': 'example@example.com'}),
                             required=True)
    # text = forms.CharField(label='Few words about you', widget=forms.Textarea, required = False )
    phone_no = forms.CharField(widget=forms.TextInput(attrs={'type':'number',
                                                             'class': 'form-control',
                                                             'placeholder': '+97123456789'}))
    resume = forms.Field(label='Upload Resume', widget = forms.FileInput, required = True)

有没有办法减少输入框的宽度？请帮助我是django的新手。

Answer 1

要更改所有字段的宽度：

在模板的max-width中设置CSS <head>：

<style>
    input {max-width: 12em};
</style>

要快速更改特定表单字段：

在widget.attrs上指定自定义样式属性：

email = forms.EmailField(
    max_length=64,
    widget=forms.TextInput(attrs={'style':'max-width: 12em'}),
    required=True)

或者在表单的__init__方法中，您可以执行以下操作：

    self.fields['email'].widget.attrs.update(style='max-width: 12em')

有关更多信息，请参见Customizing Django widget instances。

用于复杂的自定义表单布局：

通过在表单的FormHelper方法中添加自定义__init__，打开Django Crispy Forms的完整布局功能：

def __init__(self, *args, **kwargs):
    self.helper = FormHelper()
    self.helper.form_tag = False
    self.helper.layout = Layout(
        Field('f_name'),
        Field('s_name'),
        Field('email', style='max-width: 7em'),
        Field('phone_no'),
        Fieldset(
            '',
            HTML('<h4>Tell us more about yourself</h4>'),
            Field('resume'),
        )
    )

有关更多信息，请参见Crispy Forms layouts。

Django - 以酥脆的形式减小输入框的大小

1 个答案: