strange upload mechanism clashing with crispy forms styling

57 views
Skip to first unread message

clarkso...@gmail.com

unread,
Feb 25, 2016, 7:38:21 AM2/25/16
to Django users

The following is a part (the rest being in models an views) of an upload-file mechanism in my forms.py:

from crispy_forms.layout import Div
class DocumentForm(forms.Form):
   docfile = forms.FileField(label='Select a BAM file')
   Div('docfile', style="background: black;", css_class="col-sm-6 col-md-9 col-lg-9")

HTML

  {% crispy form %} # this way the file, naturally, does not upload well

I'm aware that there is a lot more elaborate ways of doing this but really I just want the upload to be functional which it is and from there I'd like to control the CSS/bootstrap...

Help Please!!!

James Schneider

unread,
Feb 25, 2016, 1:46:35 PM2/25/16
to django...@googlegroups.com
On Thu, Feb 25, 2016 at 4:38 AM, <clarkso...@gmail.com> wrote:

The following is a part (the rest being in models an views) of an upload-file mechanism in my forms.py:

from crispy_forms.layout import Div
class DocumentForm(forms.Form):
   docfile = forms.FileField(label='Select a BAM file')
   Div('docfile', style="background: black;", css_class="col-sm-6 col-md-9 col-lg-9")


I'm not entirely sure what you are trying to do here, but I do know that isn't the way to do it. You probably shouldn't ever have bare object calls at the class level without an assignment to a class variable.

You have two options: 
  1. Add the styling directly to the Django form widget (https://docs.djangoproject.com/es/1.9/ref/forms/widgets/#django.forms.Widget.attrs
  2. Create a custom Layout() object using Crispy Forms that wraps your 'docfile' field in a <div> with those extra classes. This is probably the most straightforward way to do it since you have Crispy Forms available.
    1. http://django-crispy-forms.readthedocs.org/en/latest/layouts.html#fundamentals
    2. http://django-crispy-forms.readthedocs.org/en/latest/layouts.html#universal-layout-objects

You can probably also mix the two approaches by adding the styling that is specific to the widget itself directly in the form field definition, and also add the Layout/Div() definitions to your formhelper to add the additional styling for the <div> wrapper, and only referring to the field as 'docfile' rather than defining a full Field() object, which may make your code easier to read. 

-James
Reply all
Reply to author
Forward
0 new messages