First of all, I noticed that in your definition of the serial
field, you forgot to put widget=
before forms.TextInput(
. Also, your p
should have the alert
class too, not just alert-info
.
I was able to kind of fix the problem by changing the first instance of span1
to span6
, but I definitely don't recommend that because resizing the window causes layout issues and can even make it appear that there is no submit button at all!
I was going to recommend using PrependedAppendedText
, but the template makes the assumption that you're appending text and not a button, so that won't work unless you override the template (e.g. PrependedAppendedText.template = 'custom_appended_prepended_text.html'
). If you want to go that route, just copy the original template to your custom one, remove the span
that the second instance of {{ crispy_appended_text|safe }}
is inside of, and then use code like this:
Div(PrependedAppendedText('serial', 'Serial #', '<button class="btn btn-primary">Submit</button>', css_class='input-xlarge'), css_class='span1'),
I do have another suggestion, though. I like this solution much better, but it means giving up the prepended text in favor of placeholder text. First, in addition to setting the field's autocomplete
attribute to off
, set its class
attribute to input-xlarge
and its placeholder
attribute to Serial #
. Next, use this code:
FieldWithButtons('serial', StrictButton('Submit', type='submit', css_class='btn-primary')),
No need to create a custom template. Also, between the p
you have at the top of the form and the field's placeholder text, I don't think your users will be confused by the lack of prepended text.