I am trying to customize my admin form by modifying change_form.html. Here's what I have so far:
In my forms.py, I have:
class ProblemForm(forms.ModelForm):
slug = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'link'}))
topic = forms.ModelChoiceField(label = "Topic", queryset = Topic.objects.all())
questionToProblem = forms.CharField(label = "Question", widget = CustomAdminPageDown(attrs={'id' : 'mathInputForQuestion', 'onchange':'Preview.Update()'}))
solutionToProblem = forms.CharField(label = "Solution", widget = CustomAdminPageDown(attrs={'id' : 'mathInputForSolution'}))
class Meta:
model = Problem
fields = ('questionToProblem', 'solutionToProblem')
In my change_form.html, I have:
{% extends "admin/change_form.html" %}
{% block after_field_sets %}{{ block.super }}
<body>
<p>Preview is shown here:</p>
<div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; height: 20%; margin-top:20px" class="format-paragraph"></div>
<div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; height: 20%; margin-top:20px;
visibility:hidden; position:absolute; top:0; left: 0"></div>
</body>
However, I want the to be under the questionToProblem form, so that when I look at the page, the div is right below the textarea. How would I do that?