django-crispy-forms have field and button on same row

Question

I am needing to have a bootstrap PrependedText field with a button on the same row. I can get it on the same row but it shows the button before the textbox and I want it after. What am I doing wrong and how do I get it to display after the box (on the right side of the text field)

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'
        )
    )

Answer 1

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.