Django - Reducing the size of input box in crispy forms
Question
I have made a modal box using django forms. I am using django crispy forms to beautify the form display. The following is the my html file for displaying my form:
<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>
Crispy forms has beautified my form as expected, but the input box size of all is wider. Is there any way to reduce the size of of the input box? I have tried adding 'sm-4' but it is reducing the size of input box not the modal box.
My forms.py file is as follows:
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)
Is there any way to reduce the input box width? Please help I am new to django.
1 answers
solution1
1 2019-02-11 05:26:30
To change the width of all fields:
Set the CSS max-width in your template's <head> :
<style>
input {max-width: 12em};
</style>
For a quick change to a particular form field:
Specify a custom style attribute on the widget.attrs :
email = forms.EmailField(
max_length=64,
widget=forms.TextInput(attrs={'style':'max-width: 12em'}),
required=True)
Alternately in the form's __init__ method, you can do:
self.fields['email'].widget.attrs.update(style='max-width: 12em')
See the Customizing Django widget instances for more.
For an intricate custom form layout:
Turn on the full layout power of Django Crispy Forms by adding a custom FormHelper in your form's __init__ method:
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'),
)
)
See the Crispy Forms layouts for more.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.