form-horizo​​ntal 不适用于 django-crispy-forms 和 django-registration-redux

Posted 2023-02-24

【中文标题】form-horizo​​ntal 不适用于 django-crispy-forms 和 django-registration-redux

【英文标题】：form-horizontal not working with django-crispy-forms and django-registration-redux

【发布时间】：2015-08-29 11:38:30

【问题描述】：

免责声明：我是 Django 和 python 的新手。

我正在使用带有 django 注册 redux 的脆皮表单。我已将 form-horizo​​ntal 应用于注册表单的子类，但它不会在与输入字段相同的行上显示标签，如您在此处看到的：http://imgur.com/hdrPei9

我已将表单水平硬编码到模板中的 html 中，这会将表单内容转移到容器外部：http://imgur.com/KQIKQ7Q

我已尝试创建一个名为 supplyhelixRegistrationForm 的子类表单，其中包含标签和字段类清晰的表单文档说包括：（将包含链接但没有足够的声誉）

来自注册 redux 应用程序的 forms.py 的一部分，包括我的修改：

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Submit, HTML, Button, Row, Field
from crispy_forms.bootstrap import AppendedText, PrependedText, FormActions

User = UserModel()


class RegistrationForm(UserCreationForm):


    required_css_class = 'required'
    email = forms.EmailField(label=_("E-mail"))

    class Meta:
        model = User
        fields = (UsernameField(), "email")



class supplyhelixRegistrationForm(RegistrationForm):

    def __init__(self, *args, **kwargs):
        super(supplyhelixRegistrationForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()  
        self.helper.form_class = 'form-horizontal'
        self.helper.label_class = 'col-lg-2'
        self.helper.field_class = 'col-lg-8'

然后我修改了注册reduxviews.py指向supplyhelixRegistrationForm：

REGISTRATION_FORM_PATH = getattr(settings, 'REGISTRATION_FORM', 'registration.forms.supplyhelixRegistrationForm')
REGISTRATION_FORM = import_string( REGISTRATION_FORM_PATH )

这是模板：

% extends "registration/registration_base.html" %
% load i18n %
% load crispy_forms_tags %
% crispy RegistrationForm RegistrationForm.helper %

% block title %% trans "Register for an account" %% endblock %

% block content %


<div class="container  vertical-center">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="panel  formBackground">

      <div class="panel-heading text-center">
        <h2>Transform your supply chain today!</h2>
      </div>
      <div class="panel-body">


        <form  method="post" action="">
           % csrf_token %
            form|crispy
           <input class="btn btn-lg btn-primary btn-block" type="submit"  value="% trans 'Register Now' %" />
        </form>
      </div>
    </div>
  </div>
</div>
% endblock %

感谢您提供的任何帮助。提前致谢！

【问题讨论】：

忘了提一下：我按照文档安装了crispy-forms。将该应用添加到我的项目 settings.py 中，并包含 bootstrap3 模板包。

【参考方案1】：

问题是您正在使用清晰的模板呈现表单，但是因为您将其用作模板变量 ( some_variable ) 而不是使用 % crispy form_name % 标记，所以 FormHelper 属性没有得到应用正确。

试试这些改变：

将 form | crispy 替换为% crispy form %。 如果您想继续手动渲染<form></form> 标签，请将以下属性添加到FormHelper：

self.helper.form_tag = False

您可能需要删除当前尝试手动创建.form-horizontal 效果的两行：

self.helper.label_class = 'col-lg-2'

self.helper.field_class = 'col-lg-8'

...DCF 会自动将 Bootstrap .form-horizontal CSS 类添加到您的表单中，这些可能会干扰这些自动添加。

【讨论】：

YPCrumble，感谢您的快速回复！对此，我真的非常感激。我进行了您建议的更改并得到以下信息：imgur.com/F3nl7R7 知道发生了什么吗？

要尝试的一件事是删除% crispy RegistrationForm RegistrationForm.helper %。我从来不需要这样的标签，也许它让你的格式变得奇怪。除此之外，它现在看起来像是一个 CSS 问题。 .form-horizontal 类似乎得到了正确应用，对吗？您必须发布要渲染的 HTML/CSS 才能对其进行调试，这可能是一个单独的问题。

是的，我不认为它有多大作用。无论如何，不​​幸的是，在没有改变输出的情况下删除了它。

知道了。我会看看那个。非常感谢！

@WalterWhite 更新了我的答案，您可能也想删除 col-lg-*classes