Feature Suggestion: horizontal Tabs for inline (TabularInline, StackedInline)

[omargawdat]

first thanks for this awesome work, but it would be great if you consider enabling to display the inline admin as horizontal tabs instead of making it display vertically as when we have several inline models the data is got messed and be hard for navigation.

Current View:

Target View(as you can see there is bookings tab section so i can see all the user bookings)

[AlanL-django]

+1 for this.

I'm currently looking for a replacement for Suit in an old app that I'm modernising, and this for me is the #1 missing feature that prevents me choosing Unfold over Baton.

[omargawdat]

+1 for this.

I'm currently looking for a replacement for Suit in an old app that I'm modernising, and this for me is the #1 missing feature that prevents me choosing Unfold over Baton.

Unfold stands out as the superior choice for Django admin panels, offering an extensive array of options alongside a visually attractive interface. The integration of this essential feature, pivotal for managing complex applications, would significantly enhance its utility and effectiveness, so hope they consider it.

[linuxipho]

Hi, and thanks for the great job already accomplished !
It would be nice to be able to only display Inline fieldset in a specific tab.
For now, I do it by playing with Alpine.js and template override, but a simple declaration like tab class in admin fieldsets would be wonderful !

[dacodekid]

Hi, and thanks for the great job already accomplished ! It would be nice to be able to only display Inline fieldset in a specific tab. For now, I do it by playing with Alpine.js and template override, but a simple declaration like tab class in admin fieldsets would be wonderful !

@linuxipho Would you plz share an example how you doing it?

[dacodekid]

The below idea works for me.

1. Create an empty fieldset

class MODELAdmin(BaseAdminMixin):
    change_form_template = "admin/APP/MODEL/change_form.html"

    inlines = [SubModelInline]

    fieldsets = (
        ...
        ...
        
        (
            "INLINE TAB NAME",
            {
                "classes": ["tab"],
                "fields": (),
            },
        ),
    )

Add this JS that targets your SubModelInline's CSS class in your overridden template

{% extends "admin/change_form.html" %}
{% load i18n admin_urls admin_modify unfold static %}

{% block extrahead %}
    {{ block.super }}
    
    <script type="text/javascript">
    window.onload = function() {
        var inlineTab = document.querySelector('.tab-wrapper.fieldset-TAB_CLASS .aligned');
        var modelInline = document.getElementById('APP_NAME_MODELNAME-group');
        inlineTab appendChild(modelInline);
    };
    </script>
    
{% endblock %}