[英]django-crispy-forms have field and button on same row
我需要一个带有同一行按钮的bootstrap PrependedText字段。 我可以在同一行上获取它,但它在文本框之前显示按钮,之后我想要它。 我做错了什么以及如何在框后显示(在文本字段的右侧)
serial = forms.CharField(forms.TextInput(attrs={'autocomplete':'off',}))
serial.label = ''
helper = FormHelper()
helper.form_class = 'form-horizontal'
helper.form_action = 'checkout'
helper.form_method = 'post'
helper.layout = Layout(
HTML("<p class='alert-info'>Please scan the items barcode or enter the serial # in the field below.</p>"),
Div(
Div(PrependedText('serial', 'Serial #',css_class='input-xlarge'), css_class='span1'),
Div(Submit('submit','Submit', css_class='btn-primary'), css_class='span1'),
css_class='row-fluid'
)
)
首先,我注意到在你对serial
字段的定义中,你忘了在widget=
之前放置widget=
forms.TextInput(
。另外,你的p
应该有alert
类,而不仅仅是alert-info
。
我能够改变的第一个实例一种解决问题span1
到span6
,但我绝对不建议,因为调整窗口的大小导致布局问题,甚至可以使它看起来是没有提交按钮可言!
我打算建议使用PrependedAppendedText
,但模板假设您要附加文本而不是按钮,因此除非您覆盖模板(例如PrependedAppendedText.template = 'custom_appended_prepended_text.html'
),否则这将无效。 如果你想要去那条路线,只需将原始模板复制到自定义模板,删除{{ crispy_appended_text|safe }}
的第二个实例所在的span
,然后使用如下代码:
Div(PrependedAppendedText('serial', 'Serial #', '<button class="btn btn-primary">Submit</button>', css_class='input-xlarge'), css_class='span1'),
不过,我确实有另一个建议。 我更喜欢这个解决方案,但这意味着放弃前置文本以支持占位符文本。 首先,除了将字段的autocomplete
属性设置为off
,还要将其class
属性设置为input-xlarge
,将其placeholder
属性设置为Serial #
。 接下来,使用此代码:
FieldWithButtons('serial', StrictButton('Submit', type='submit', css_class='btn-primary')),
无需创建自定义模板。 此外,在表单顶部的p
和字段的占位符文本之间,我认为您的用户不会因缺少前置文本而感到困惑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.