如何在 Django 中更改 NumberInput 小部件的宽度？答案

【问题标题】：How to change NumberInput widget width in Django?如何在 Django 中更改 NumberInput 小部件的宽度？
【发布时间】：2018-09-03 22:03:14
【问题描述】：

我尝试改变 NumberInput 和 TextInput 小部件的宽度：

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

它适用于 TextInput 小部件，但不适用于 NumberInput 小部件。
我该怎么做？

【问题讨论】：

您所说的“效果很好”是什么意思？
我的意思是它适用于 TextInput。

标签： django

【解决方案1】：

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

“数字”类型的元素不支持尺寸等表单尺寸属性。您必须借助 CSS 来更改这些控件的大小。

您是否尝试过放置一个类并创建一个适合大小的 css？

看起来像这样：

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

然后在 css 中添加：

.form-number {
width: 10pt;
}

【讨论】：

不，我没有尝试过。我只是认为如果它与 TextInput 一起使用，它也应该与 NumberInput 一起使用......
显然是it doesn't。
我通常不使用小部件调整外观。我只是添加类以便稍后将所有内容放入 css 中。我从未测试过大小，所以我无法告诉你它是否适用于 NumberInput。
“数字”类型的元素不支持尺寸等表单尺寸属性。您必须借助 CSS 来更改这些控件的大小。

【解决方案2】：

您可以在表单中更改 NumberInput 的宽度

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}),
        }

【讨论】：