AG GRID View is very small

Dash Python
1

Hello,

<!-- dashboard/templates/dashboard/aggrid.html -->
{% extends 'dashboard/base.html' %}
{% load plotly_dash %}

{% block title %}
  Dash AG Grid View
{% endblock %}

{% block content %}
    {% plotly_app name="AGGrid" %}
{% endblock %}


<!-- dashboard/templates/dashboard/base.html -->
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}Meine Django App{% endblock %}</title>
        {% load static %}

        <!-- Bootstrap 5 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
        
        <style>
            html, body {
                height: 100%;
                margin: 0;
            }
            #app {
                height: 100%;
            }
            main {
                height: 100%;
            }
        </style>
    </head>
<body>
    <div id="app" class="container-fluid h-100 d-flex flex-column">
        
        <header class="mb-4">
            <!-- Navigation -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
                <div class="container-fluid">
                    <a class="navbar-brand" href="{% url 'home' %}">Django App</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'home' %}">Startseite</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'datatable' %}">DataTable</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'aggrid' %}">AG Grid</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <main class="flex-grow-1">
            {% block content %}
            <!-- Der spezifische Inhalt wird hier eingefügt -->
            {% endblock %}
        </main>

        <footer class="text-center mt-4">
            <p>&copy; 2023 Meine Django App</p>
        </footer>
    </div>

    <!-- jQuery (für Bootstrap-Abhängigkeiten) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

    <!-- Bootstrap Bundle mit Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>


# dashboard/dash_apps/aggrid.py

from dash import html
import dash_ag_grid as dag
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash
from dashboard.views import get_latest_data
from dashboard.config_views.config import column_settings

external_stylesheets = [dbc.themes.BOOTSTRAP]

app = DjangoDash("AGGrid", external_stylesheets=external_stylesheets)

df = get_latest_data()


column_defs = ..

app.layout = html.Div(
    style={"height": "100%", "width": "100%"},
    children=[
        # Umgebender Div, um die Höhe zu steuern
        html.Div(
            dag.AgGrid(
                id="ag-grid",
                columnDefs=column_defs,
                rowData=df.to_dict("records"),
                defaultColDef={
                    "filter": True,
                    "sortable": True,
                    "resizable": True,
                },
                dashGridOptions={
                    "enableBrowserTooltips": True,
                    "domLayout": "normal",
                },
                # style={"height": "100%", "width": "100%"},
            ),
            style={"height": "100%", "width": "100%"},
        ),
    ],
)

This is my code.
My problem is that the ag grid table is very short. I tried many things I couldn’t resize it. I want it to use the whole screen in a responsive way.

EDIT:
Solution was the aggrid.html
The iframe was limited.

{% plotly_app name="AGGrid" %} --> {% plotly_app name="AGGrid" height="85vh"%}
2

change the top style associated to the html.Div to: style={"height": "100vh", "width": "100vw"},