Django spacing between fields in form

Question

I am a beginner in Django, hence this might be a simple issue. But I'm not able to get past this successfully.

This is my models.py

class Category(models.Model):
    name = models.CharField(max_length=128)
    abbr = models.CharField(max_length=5)

    def __unicode__(self):
        return self.name

class Fabric(models.Model):
    name = models.CharField(max_length=128)
    abbr = models.CharField(max_length=5)

    def __unicode__(self):
        return self.name

class Manufacturer(models.Model):
    name = models.CharField(max_length=128)
    location = models.CharField(max_length=128)
    name_abbr = models.CharField(max_length=5, default=None)
    loc_abbr = models.CharField(max_length=5, default=None)

    def __unicode__(self):
        return self.name

class Images(models.Model):
    design_id = models.CharField(max_length=128)
    file = models.ImageField(upload_to='images')
    cost_price = models.FloatField()
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    fabric = models.ForeignKey(Fabric, on_delete=models.CASCADE)
    manufacturer = models.ForeignKey(Manufacturer, on_delete=models.CASCADE)
    selling_price = models.FloatField()
    aliveness = models.IntegerField()
    date_added = models.DateTimeField(default=datetime.datetime.now)
    set_cat = models.IntegerField()
    set_cat_no = models.IntegerField()
    set_cat_name = models.CharField(max_length=50, blank=True)

I'm building an apparel management database system which contains cloth designs. My forms.py is

class ImagesForm(forms.ModelForm):

    class Meta:
        model = Images
        fields = ('file','cost_price','set_cat_no','set_cat_name',)

My views.py

@login_required
def uploadphoto(request):
    context = RequestContext(request)
    context_dict = {}

if request.method == 'POST':
    form = ImagesForm(request.POST,request.FILES)

    if form.is_valid():

        image = form.save(commit=False)

        image.save()

        return render_to_response(request,'cms/upload-photo.html', {'upload_image': form})
    else:
        print form.errors

else:
    form = ImagesForm()
    context_dict = {'upload_image': form}

    return render_to_response('cms/upload-photo.html',context_dict, context)

My upload-photo.html is

{% block main %}

<form id="upload_form" method="post" action="/zoomtail/upload-photo/" enctype="multipart/form-data">
{% csrf_token %}
{{ upload_image }}
</form>
{% endblock %}

Here I'm getting all the fields in the interface crammed up. How do I give spaces between them? In upload-photo.html I'm mentioning only {{ upload_image }}. How do I manipulate this to get a well-spaced UI?

Answer 1

try this

{{ upload_image.as_p }} will render them wrapped in <p> tags

also you can use as_ul or as_table see docs

Answer 2

Alright, so you pass the form to the template, but this is by default adds the form elements as a list. One option but probably not the only is to enter your form element init method and add the fields class attributes. Once you did that, you may want to add css script to the added classes and hence you will be able access the layout of your form.

Here is a piece of my code:

def __init__(self, *args, **kwargs):
kwargs.setdefault('label_suffix', '')
    super(FileUploadForm, self).__init__(*args, **kwargs)
    self.fields['file_source'].widget.attrs = {
        'class': 'form-control s90 h28 custom_f_all',
        }

Hope it helps.

Good luck!