Django的 - 减少输入框的形式香脆的大小

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

我已经使用Django形成一个模式对话框。我使用Django酥脆形式美化形式显示。以下是我的显示形式我的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>

脆皮形式美化了我的形式预期,但所有的输入框的大小是宽。有没有什么办法,以减少输入框的大小?我曾尝试将“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': '[email protected]'}),
                             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。

python django django-crispy-forms
1个回答
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的脆皮形式的完整布局功率:

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更多。

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