我的问题是ag网格表很短。我尝试了很多方法但无法调整它的大小。我希望它以响应式方式使用整个屏幕。
# 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%"},
),
],
)
<!-- 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/[email protected]/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">
....
</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>© 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/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>
<!-- 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 %}
我尝试了很多事情，例如尝试在 aggrid.html 中调整它的大小或测试其他引导类或编辑 aggrid.py 中的 div。 我有一个基本的 html，我也展示了它。我希望有人能帮忙。
children=[
html.Div(
id="ag-grid-container",
style={"height": "600px", "width": "100%"} # Set height and width
),
]
)````