admin管理员组文章数量:1336602
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.
# 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 = (
dag.AgGrid(
id="ag-grid",
columnDefs=column_defs,
rowData=df.to_dict("records"),
defaultColDef={
"filter": True,
"sortable": True,
"resizable": True,
},
dashGridOptions={
"domLayout": "autoHeight",
"pagination": True, # Aktiviert die Paginierung
"paginationPageSize": 50,
}, # Setzt die Anzahl der Zeilen pro Seite auf 50},
),
)
<!-- 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="/[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=".6.0.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle mit Popper.js -->
<script src="/[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 %}
I tried many things, such as trying to resize it in the aggrid.html or testing other bootstrap classes or editing the div in the aggrid.py. I have a base html which I also showed. I hope somebody can help.
EDIT: Solution was the aggrid.html The iframe was limited.
{% plotly_app name="AGGrid" %} --> {% plotly_app name="AGGrid" height="85vh"%}
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.
# 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 = (
dag.AgGrid(
id="ag-grid",
columnDefs=column_defs,
rowData=df.to_dict("records"),
defaultColDef={
"filter": True,
"sortable": True,
"resizable": True,
},
dashGridOptions={
"domLayout": "autoHeight",
"pagination": True, # Aktiviert die Paginierung
"paginationPageSize": 50,
}, # Setzt die Anzahl der Zeilen pro Seite auf 50},
),
)
<!-- 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/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/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle mit Popper.js -->
<script src="https://cdn.jsdelivr/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 %}
I tried many things, such as trying to resize it in the aggrid.html or testing other bootstrap classes or editing the div in the aggrid.py. I have a base html which I also showed. I hope somebody can help.
EDIT: Solution was the aggrid.html The iframe was limited.
{% plotly_app name="AGGrid" %} --> {% plotly_app name="AGGrid" height="85vh"%}
1 Answer
Reset to default 0 children=[
html.Div(
id="ag-grid-container",
style={"height": "600px", "width": "100%"} # Set height and width
),
]
)````
本文标签： pythonPlotly DashAG GRID View is very smallStack Overflow
版权声明：本文标题：python - Plotly Dash - AG GRID View is very small - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742410353a2469661.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论