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">&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 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.

try this http://stackoverflow.com/questions/22746944/django-crispy-forms-input-size — Rohit Khatri, Jul 31 '16 at 15:19
@RohitKhatri I tried it, but it was not working. any other way? — Jeril, Jul 31 '16 at 17:03

score 10 · Answer 1 · answered Feb 11 '19 at 05:26

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.

Note, to change this using CSS each field has its own `id` e.g `id_div_field1` thus you can modify it using CSS as well — CutePoison, Jul 13 '21 at 04:24

Django - Reducing the size of input box in crispy forms

1 Answers1