CODEWITHSUNDEEP
djangodjango-forms
WannaInternet
WannaInternet

Reputation: 424

Make HTML element be under form textarea

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?

Upvotes: 1

Views: 177

Answers (1)

jburte
jburte

Reputation: 11

You could instead write a custom widget that is a subclass of CustomAdminPageDown, and depending on what version of Django you're using there are a couple ways you'd extend to add your preview block.

Django widget override template

Additionally, you can associate the file containing the Preview.Update() javascript using the Media class to keep things tidy.

https://docs.djangoproject.com/en/dev/topics/forms/media/#topics-forms-media

Upvotes: 1

Related Questions