在Django Crispy Forms中,在表单字段的同一行呈现提交按钮



我使用的是Django Crispy Forms,而不是将Submit按钮呈现在其他字段的下面,我想将其移动到与另一个字段相同的行。我当前的Form代码如下:

class SetForm(forms.ModelForm):
class Meta:
model = Set
fields = ['exercise', 'actual_weight', 'actual_reps', 'actual_difficulty']
helper = FormHelper()
helper.form_method = 'POST'
helper.layout = Layout(
Row(
Column('exercise', css_class='form-group col-md-12 mb-0'),
css_class='form-row'
),
Row(
Column('actual_weight', css_class='form-group col-6 mb-0'),
Column('actual_reps', css_class='form-group col-6 mb-0'),
),
Row(
Column('actual_difficulty', css_class='form-group col-6 mb-0'),
Column(helper.add_input(Submit('submit', 'Submit', css_class='form-group btn-primary col-6 mb-0'))),
)
)

这不起作用,虽然col-6类似乎应用了,但Submit按钮仍然在表单下面的自己的行上。

我试着看这个问题,但它既没有答案也没有使用Django Crispy Forms,以及这个问题,但是那个问题专注于前置文本,并且不容易修改这个用例的答案。请帮助!

figure out:

class SetForm(forms.ModelForm):
class Meta:
model = Set
fields = ['exercise', 'actual_weight', 'actual_reps', 'actual_difficulty']
helper = FormHelper()
helper.form_method = 'POST'
helper.layout = Layout(
Row(
Column('exercise', css_class='form-group col-md-12 mb-0'),
css_class='form-row'
),
Row(
Column('actual_weight', css_class='form-group col-6 mb-0'),
Column('actual_reps', css_class='form-group col-6 mb-0'),
),
Row(
Column('actual_difficulty', css_class='form-group col-6 mb-0'),
Column(Submit('submit', 'Submit', css_class='btn-primary col-6')),
)
)

技巧是去除去除helper.add_input子句。这可以将提交按钮添加到表单中,但显然它也使它将提交按钮放在表单之后,而不是使用布局嵌入。

有一点需要注意:这个解决方案是不完美的:提交按钮现在与' actual_difficulty '字段在同一行,但它与actual_difficulty字段的高度不同。这是因为actual_difficulty字段有足够的高度来容纳标签和输入,而提交按钮没有。为了使这个解决方案看起来更理想,它仍然需要在提交按钮上应用一些自定义css来使其具有相同的高度。

最新更新