Question

I have the following code, but it doesn’t put the scrolling div anywhere. All the other combinations I’ve tried (such as placing the div around the table) results in some or other incorrect placement of the scroll bars.
This is the html:

<form action="" method="post">
  <table>
    <div style="overflow: auto; width : 200px; height : 50px;">
      {{ form }}
    </div>
    <tr><td colspan="2"><input type="submit" value="Save"/></td></tr>
  </table>
</form>

My forms look like this:

class GroupForm(forms.ModelForm):
    class Meta:
        model = Group

    def __init__(self, *args, **kwargs):
        super(GroupForm, self).__init__(*args, **kwargs)

        self.fields['permissions'].widget = forms.CheckboxSelectMultiple()
        self.fields['permissions'].choices = ((p.id, p.name) for p in Permission.objects.order_by("name"))

My views.py looks like this:

def group_edit(request, group_id, template_name="group_edit.html", extra_context=None, form_class=None):

    edit_group = get_object_or_404(Group, pk=group_id)
    extra_context = extra_context or {}
    form_class = form_class or GroupForm
    extra_context["edit_group"] = edit_group

    if request.method == "POST":
        form  = form_class(instance=edit_group, data=request.POST)
        if form.is_valid():
            form.save()
            return redirect(reverse("global_group_list"))
    else:
        form = form_class(instance=edit_group)

    extra_context["form"] = form

    return direct_to_template(
        request,
        template_name,
        extra_context=extra_context
    )

Answer 1

Put the DIV inside a table row like this

<form action="" method="post">
  <table>
    <tr><td><div style="overflow: auto; width : 200px; height : 50px;">
      {{ form.as_p }}
    </div></td></tr>
    <tr><td colspan="2"><input type="submit" value="Save"/></td></tr>
  </table>
</form>