我已经使用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">×</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。
要更改的所有字段的宽度:
设置在模板的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'),
)
)