Django-crispy-forms have a field and a button on the same line

Question

I need to have a PrependedText loading field with a button on the same line. I can get it in one line, but it shows the button in front of the text box, and I want it after. What am I doing wrong, and how can I display it after the window (on the right side of the text box).

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( . In addition, your p must have an alert class, not just alert-info .

I managed to solve the problem by changing the first instance of span1 to span6 , but I definitely do not recommend it, because resizing the window causes layout problems and it may even seem that there is no submit button at all!

I was going to recommend using PrependedAppendedText , but the template assumes that you are adding text, not a button, so this will not work if you do not cancel the template (e.g. PrependedAppendedText.template = 'custom_appended_prepended_text.html' ). If you want to go this route, just copy the source template to your own, delete the span that contains the second instance {{ crispy_appended_text|safe }} , and then use the following code:

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

I have one more suggestion. I like this solution much better, but it means dropping the added text in favor of the placeholder text. First, in addition to the autocomplete field autocomplete for off , set the class attribute to input-xlarge and its placeholder Serial # attribute. Then use this code:

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

No need to create a custom template. Also, between p you have the top of the form and the text of the field placeholder, I don’t think your users will be confused by the lack of preliminary text.