Need help customizing {{ form.media }} display

[vladyslavnUA]

I'm not sure if I missed a closed issue on how to solve this but I am trying to have my {{ form.media }} render out the same way as in the README gif for this repo.

My code is pretty much the same as everyone else's:

<div class="row">
     <div class="col-md-6">
           <form method="POST" action="">
                {% csrf_token %}
                {{ form|crispy }}
            </form>
     </div>
     <div class="col-md-6">
           {{ form.media }}
     </div>
</div>

What I am trying to do here is have them be side by side, but all this renders out is the media right below the form

P.S. I'm happy to be the first issue opener of 2021 :)

[jagaudin]

I think you're misunderstanding what form.media is. It's actually the <script> tag for the plugin. I put it my js block.

{% block js %}
{{ block.super }}
{# MarkdownX js #}
{{ form.media }}
{% endblock %}

[jagaudin]

What you are looking for is a div with class markdownx-preview. To have panels side by side you need to customize the default template below.

<div class="markdownx">
    {% include 'django/forms/widgets/textarea.html' %}
    <div class="markdownx-preview"></div>
</div>

[vladyslavnUA]

Ahh I see.

Thanks for your swift response, I will try this out later tonight.