Create controls-row in django-crispy-forms

Question

Using django-crispy-forms I want to combine two (or more) widgets on a single row. See also the attached example. I think it should be possible using that library, although the documentation does include examples on this issue and the source code didn't help either. So has anyone managed to get similar results using django-crispy-forms?

The HTML required for such a form looks like this:

<div class="control-group">
    <label for="desc" class="control-label">
        Description
    </label>
    <div class="controls controls-row">
        <input class="span2" maxlength="255" type="text" id="desc">
        <input class="span3" maxlength="255" type="text">
    </div>
</div>

Answer 1

Yes. Use Layouts

Here's an example snippet to get you going.

def __init__(self, *args, **kwargs):
    self.helper = FormHelper()
    self.helper.form_method = 'get'
    self.helper.form_id = 'id_search'
    self.helper.layout = Layout(
            Div(
                Div(Field('arrival_date', css_class='span12 input-large calendar',
                    placeholder='dd/mm/yyyy'), css_class='span5'),
                Div(Field('departure_date', css_class='span12 input-large calendar',
                    placeholder='dd/mm/yyyy'), css_class='span5'),
                Div(Field('rooms', css_class='span12'), css_class='span2 styled-rooms'),
                css_class='row-fluid',
            ),
        )

Answer 2

You could do it with defining HTML object in `def init(self, *args, **kwargs): in layout object. This HTML will give you all the freedom you want for your needs.

There is another way too. To actually make your own template in in your templates folder and then in your layout object define the path to that template Example:

Field('name', template='path/to/template/single_line_input.html'),

Where 'name' is actually a widget.

Of course you could always try to do it with playing around in the CSS files for your app, something like float: left or display: inline might help, but you would have to define the classes on the widgets which should be displayed inline. This could be a bit tricky for someone who is not skilled in frontend CSS (for result could be various in different browsers and on different resolutions, so needless to say some testing is needed). The problem you have is mainly the fact that browsers are rendering input fields as block objects by default, so they take up all the space in one line even if their width is less.