Cannot add content to admin sidebar without breaking layout

[Ben Davis]

If I want to add content to the sidebar on the admin index page, I would normally override admin/index.html like so:

{% extends "admin/index.html" %}

{% block sidebar %}
  <p>Other stuff</p>
  {{ block.super }}
{% endblock %}

However, using {{block.super}} breaks layout because it contains <div id="content-related">, which is floated right to achieve the sidebar look. Adding any content before this will shift the sidebar to the bottom of the page.

Ideally, there should be another block inside <div id="content-related">, possibly called {% block sidebar_content %}, so that template authors can add content to the sidebar.

[Ben Davis]

PR: ​https://github.com/django/django/pull/13538

[Carlton Gibson]

Hi Ben.

This is a curious one.

Have a look at this diff:

$ git diff
diff --git a/django/contrib/admin/templates/admin/index.html b/django/contrib/admin/templates/admin/index.html
index b6e84b64ed..f075aef37f 100644
--- a/django/contrib/admin/templates/admin/index.html
+++ b/django/contrib/admin/templates/admin/index.html
@@ -18,8 +18,22 @@
 {% endblock %}
 
 {% block sidebar %}
+
+<div style="float:right;position:relative;margin-right: -300px;width:260px;">
+<h2>On top</h2>
+<p>the float and clear lets us position OK.</p>
+<p>No styling.</p>
+</div>
+<div style="clear: right;"></div>
+
 <div id="content-related">
+    <h2>Inside #content-related</h2>
+    <p>In the grey sidebar.</p>
+    <p>But style mismatch</p>
+
     <div class="module" id="recent-actions-module">
+        <h2>Inside #recent-actions-module</h2>
+        <p>Picks up styling from Recent Actions.</p>
         <h2>{% translate 'Recent actions' %}</h2>
         <h3>{% translate 'My actions' %}</h3>
             {% load log %}
@@ -47,4 +61,7 @@
             {% endif %}
     </div>
 </div>
+<h2>After all existing content</h2>
+<p>Ends up under the app list.</p>
+
 {% endblock %}

There's three obvious positions for extra content in the sidebar:

1. Right at the top, outside #content-related (Bottom is in the diff but...)
2. Inside #content-related (top or bottom)
3. Inside #recent-actions-module (again top or bottom)

If it's 1. I'm inclined to think Just use CSS and a clearing div to put it in the right place.

Number 2. is your suggestion from the PR, but if you put it in 3, you get the styling from the Recent Actions module for free.

So I'm a bit 🤔 — what do you think?

(Half inclined to say that we should pull the inner HTML of #recent-actions-module into an included template to allow folks to go for whatever option they want here quite easily.)

[Carlton Gibson]

I'm going to close as wontfix for the moment. Go with Option 1 Just use CSS and a clearing div to put it in the right place.
Happy to discuss more if you (or anyone wants to follow up)
Thanks