How to change NumberInput widget width in Django?

Question

I'm trying to change the width of NumberInput and TextInput widgets:

class MyModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.FloatField: {'widget': NumberInput(attrs={'size':'10'})},
        models.CharField: {'widget': TextInput(attrs={'size':'10'})},
    }

It works good with TextInput widget but does not work with NumberInput widget.
How can I do it?

What do you mean by "works good" ? – Sachin Mar 25 '18 at 19:28 — Sachin, Mar 25 '18 at 19:28
I mean it works for TextInput. – Duncan Mar 25 '18 at 19:52 — Duncan, Mar 25 '18 at 19:52

Danilo Rodrigues · Answer 1 · 2018-03-25T21:16:07.060

2

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Elements of type "number" don't support form sizing attributes such as size. You'll have to resort to CSS to change the size of these controls.

Have you tried putting a class and create a css to fit the sizes?

It would look something like this:

models.FloatField: {'widget': NumberInput(attrs={'class':'form-number'})},

And in css you add this:

.form-number {
width: 10pt;
}

edited Mar 25 '18 at 21:16

answered Mar 25 '18 at 19:38

Danilo Rodrigues

373
3
17

No I did not try it. I just think if it works with TextInput it should works with NumberInput as well... – Duncan Mar 25 '18 at 19:57
Apparently [it doesn't](https://stackoverflow.com/questions/12066436/styling-html5-input-type-number). – Paulo Almeida Mar 25 '18 at 20:03
I usually do not adjust appearances with widget. I just add class to fit everything into css later. I've never tested the size, so I can not tell you if it works with NumberInput. – Danilo Rodrigues Mar 25 '18 at 20:37
Elements of type "number" don't support form sizing attributes such as size. You'll have to resort to CSS to change the size of these controls. – Danilo Rodrigues Mar 25 '18 at 21:14

score 0 · Answer 2 · answered Apr 03 '20 at 21:28

You can change the width of your NumberInput at your form

class CreateBudgetItem(forms.ModelForm):

    class Meta:
        model = BudgetModelItems
        fields = ('budget_model',)
        widgets = {
            'budget_item_description': forms.Textarea(attrs={'rows': 2, 'cols': 50}),
            'budget_item_item': forms.NumberInput(attrs={'size': 6}),
            'budget_item_quantity': forms.NumberInput(attrs={'size': 6}),
        }

score 0 · Answer 3 · answered Jan 18 '23 at 17:07

Instead of size, you need to set style to change the width of NumberInput() as shown below:

class MyModelAdmin(admin.ModelAdmin):
    formfield_overrides = {                              # Instead of 'size'
        models.FloatField: {'widget': NumberInput(attrs={'style':'width:10ch'})},
        models.CharField: {'widget': TextInput(attrs={'size':'10'})},
    }

How to change NumberInput widget width in Django?

3 Answers3