ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

python – django-crispy-forms在同一行上有字段和按钮

2019-06-25 12:46:09  阅读:282  来源: 互联网

标签:python django django-crispy-forms


我需要一个带有同一行按钮的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'
        )
    )

解决方法:

首先,我注意到在你对序列字段的定义中,你忘了在窗口之前放置widget = .TextInput(.另外,你的p也应该有alert类,而不仅仅是alert-info.

我能够通过将span1的第一个实例更改为span6来解决问题,但我绝对不建议这样做,因为调整窗口大小会导致布局问题,甚至可能会显示根本没有提交按钮!

我打算建议使用PrependedAppendedText,但the template假设您要附加文本而不是按钮,因此除非您覆盖模板(例如PrependedAppendedText.template =’custom_appended_prepended_text.html’),否则这将无效.如果你想要去那条路线,只需将原始模板复制到自定义模板,删除{{crispy_appended_text | safe}}的第二个实例所在的范围,然后使用如下代码:

Div(PrependedAppendedText('serial', 'Serial #', '<button class="btn btn-primary">Submit</button>', css_class='input-xlarge'), css_class='span1'),

不过,我确实有另一个建议.我更喜欢这个解决方案,但这意味着放弃前置文本以支持占位符文本.首先,除了将字段的autocomplete属性设置为off外,还要将其class属性设置为input-xlarge,将其占位符属性设置为Serial#.接下来,使用此代码:

FieldWithButtons('serial', StrictButton('Submit', type='submit', css_class='btn-primary')),

无需创建自定义模板.此外,在表单顶部的p和字段的占位符文本之间,我认为您的用户不会因缺少前置文本而感到困惑.

标签:python,django,django-crispy-forms
来源: https://codeday.me/bug/20190625/1285808.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有