2

I am switching from Django Crispy Forms to Floppy Forms, but my desired Bootstrap styling appears to be lost; now it just looks like a plain unstyled form.

Crispy

Here is what I had with Crispy Forms's Bootstrap template pack:

enter image description here

Here was the generated source:

<div id="div_id_sent_amount" class="form-group has-error">
        <label for="id_sent_amount" class="control-label  requiredField">How much would you like to give?
        <span class="asteriskField">*</span>
        </label>
        <div class="controls ">
        <select class="select form-control" id="id_sent_amount" name="sent_amount"><option value="" selected="selected">---------</option><option value="0.00">$0.00</option><option value="0.05">$0.05</option><option value="0.10">$0.10</option></select>
        <span id="error_1_id_sent_amount" class="help-block"><strong>This field is required.</strong></span></div>
</div>

Floppy

Here is what I get with Floppy using the Bootstrap layout here.

enter link description here

Here is the generated source:

<div class="form-group error">
    <label class="col-sm-4 control-label" for="id_sent_amount">Sent amount <span class="required">*</span>:</label>

        <div class="controls col-sm-8  field-sent_amount">
            <select id="id_sent_amount" name="sent_amount">
                 <option value="" selected="selected">---------</option>
                 <option value="0.00">$0.00</option>
                 <option value="0.05">$0.05</option>
                 <option value="0.10">$0.10</option>
            </select>
            <ul class="errorlist"><li>This field is required.</li></ul>

        </div><!--- .controls -->

Any ideas on what I am missing?

Siguza
  • 21,155
  • 6
  • 52
  • 89
RexE
  • 17,085
  • 16
  • 58
  • 81

1 Answers1

2

floppyforms just provides easier layout and widget control, it does not automatically enable bootstrap styling.

For that, you have to do a bit of work as detailed in the documentation.

In summary, you have to create these templates:

  1. floppyforms/templates/floppyforms/layouts/bootstrap.html
  2. floppyforms/templates/floppyforms/rows/bootstrap.html
  3. floppyforms/templates/floppyforms/layouts/default.html
  4. floppyforms/templates/floppyforms/errors.html

Fill them with bootstrap-specific styling (examples are provided in the documentation).

Keep in mind the examples are for an older version of bootstrap; you might want to update the templates with the current version of bootstrap.

You can edit the templates by hand to bring them up to date, or use django-floppyforms-bootstrap3 which does exactly what it says - updates the templates for bootstrap3 compatibility.

Burhan Khalid
  • 169,990
  • 18
  • 245
  • 284
  • Hi Burhan, I already did that. I see some Bootstrap classes are being applied to my form, like `class="col-sm-4"`, but the look is still not the way it was before. – RexE Sep 04 '14 at 06:05
  • Did you forget to include the bootstrap css? – Burhan Khalid Sep 04 '14 at 06:09
  • I have it (`static/bootstrap/css/bootstrap.min.css`), and the rest of the page is being styled with bootstrap, it's just the form that isn't. – RexE Sep 04 '14 at 06:11
  • 1
    You have a class `field-sent_amount` what is this? Its not from the default bootstrap CSS. – Burhan Khalid Sep 04 '14 at 06:13
  • That's generated by Floppy's `rows/bootstrap.html` (http://django-floppyforms.readthedocs.org/en/latest/bootstrap.html). See it says: `field-{{ field.name }}` – RexE Sep 04 '14 at 06:17
  • Ah, that seems to be it! Currently trying to find a version for Bootstrap3, will give an update. – RexE Sep 04 '14 at 06:39