How To Move "Add Another" Link Button Inline To The Top Django Admin

Question

I am working on a Django project and I would want to move the 'Add Another' link to the top of the inlines.

The long list of inline records make it hard to add another field, that's why I want to move the bottom to the top.

Answer 1

You have to customize inlines.js

place/create inlines.js in root static/admin/js/ folder so that admin take your customized inlines.js file.

copy whole content of inlines.js from https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/inlines.js

and in copied content customize addInlineAddButton function

            if (addButton === null) {
                if ($this.prop("tagName") === "TR") {
                    // If forms are laid out as table rows, insert the
                    // "add" button in a new table row:
                    // not using this numcol becuase im replacing tabular add-row tr to a div
                    // const numCols = $this.eq(-1).children().length;
                    ($parent).parent().parent().find('h2').after('<div class="' + options.addCssClass + '"><a href="#">' + options.addText + "</a></div>");
                    addButton = ($parent).parent().parent().find("div.add-row a");
                } else {
                    // Otherwise, insert it immediately after the last form:
                    // console.log($this.parent().find("h2"));
                    $this.parent().find("h2").after('<div class="' + options.addCssClass + '"><a href="#">' + options.addText + "</a></div>");
                    addButton = $this.parent().find("h2").next();
                }
            }
            addButton.on('click', addInlineClickHandler);

paste above peace of code inside addInlineAddButton function