Django - 更改内联表单集 textInput 大小属性答案

【问题标题】：Django - Changing inline formset textInput size attributeDjango - 更改内联表单集 textInput 大小属性
【发布时间】：2012-11-16 17:41:29
【问题描述】：

我有一个只有三个字段的内联表单集：

class Estimate_Product_Details(models.Model):
    proposalID = models.ForeignKey(Estimate_Construction, verbose_name='Proposal ID')
    CID = models.ForeignKey(Product, verbose_name = 'CID')
    qty = models.DecimalField(max_digits = 7, decimal_places = 2, verbose_name = 'Quantity')

    def __unicode__(self):
        return u'%s -- %s' % (self.proposalID, self.CID)

然后我从该模型创建一个表单：

class Product_Form(ModelForm):
    class Meta:
        model = Estimate_Product_Details
        fields = ('CID', 'qty')
        widgets = {
            'qty' : forms.TextInput(attrs={'size':30})
            }

我的目标是让qty 输入字段非常小（我有 30 个用于测试）。但是，当我通过内联表单集呈现此表单时，根本没有设置该属性。在我看来，这是表单集的创建：

    pFormSet = inlineformset_factory(Estimate_Construction, Estimate_Product_Details, form = Product_Form)

我哪里错了？为什么qty 字段的大小没有变化？

【问题讨论】：

你试过宽度而不是尺寸吗？
@karthikr：是的，我确实尝试过宽度但没有运气。还尝试了 cols（textareas 使用 cols 和 rows）只是为了它。

标签： django django-forms inline-formset

【解决方案1】：

还可以为表单的每个输入添加一个 css 类名。为此，您应该将小部件 attr 添加到表单输入的定义中。如下：

field_name = forms.CharField(label='label', max_length=100, widget=forms.TextInput(attrs={'class':'input-control'}))

【讨论】：

【解决方案2】：

编辑：它可能应该只为输入字段设置一个类并让 CSS 分配宽度。这样你就可以将它传递给不同的客户端等单独的模板。

也许不使用.attrs['size'] = 30 而是使用.attrs['class'] = 'some_class' 然后在您的HTML 模板中定义类并在那里处理不同的大小。

这应该可行：

class Product_Form(ModelForm):
    def __init__(self, *args, **kwargs):
        super(Product_Form, self).__init__(*args, **kwargs)
        self.fields['qty'].widget.attrs['size'] = 30

    class Meta:
        model = Estimate_Product_Details
        fields = ('CID', 'qty')

【讨论】：

您遇到错误了吗？我处理这个问题的方法是通过 jQuery，但是添加小部件 attrs 应该从构造函数中工作。
不，没有错误 - 刚刚加载的页面没有任何提示错误（让我想知道我是否设置了错误的表单，但我没有）。有趣的想法重新 jQuery。我会检查一下。谢谢您的帮助。 :)
jQuery: $('id-qty').attr('size', 30); 奇怪的是它在构造函数中不起作用。或者，您可以从视图代码手动操作：form = Product_Form(instance=p)，然后是 form.fields['qty'].widget.attrs = {'size': 30}

【解决方案3】：

@Furbeenator 的代码也有问题。但是，在检查生成的 HTML 时，我发现 size 属性被正确附加到 <input> 标记。

问题：我使用的是第三方模板，它用自己的 CSS 定义覆盖了 <input> 宽度。

解决方案是将宽度作为style 属性而不是size 传递：

class UserProfileForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(UserProfileForm, self).__init__(*args, **kwargs)
        self.fields['company'].widget.attrs['style'] = "width:500px"

此修改也适用于@Furbeenator 的视图修改。我没有尝试过 JQuery 变体（虽然模板使用了 JQuery，但我暂时没有）。

唯一的缺点是字段宽度现在是根据 CSS 单位定义的，例如像素或 em/ex。我将切换到 ex，但如果 CSS 有一个“平均字符宽度”单位会很好，这样您就可以定义这样的框来“容纳 20 个字符”等。

【讨论】：

要使用样式，我建议不要使用内联样式标签，而是在输入框中添加一个类属性。这样，它都在 HTML CSS 端处理。视图代码应该与显示分开，所以类属性可能是最好的，恕我直言。
在一般情况下这是有道理的——我同意将视图与显示分开。我有一个现有的模板可以使用 - 到目前为止，我还不想弄乱它的 CSS 文件。
我听说了。有时，解决方法是当前问题范围的最佳答案。
我会说这是一个聪明的解决方法。有同样的问题，即尺寸应用于输入标签，但被第三方样式定义覆盖。