仪表板布局的同步高度

Question

我试图将一个简单的 DashboardLayoutComponent syncfusion 附加到一个简单的 react 应用程序中。

简单的应用程序是向前包装的DashboardLayoutComponent，仅此而已。

但是，我看到的结果是仪表板布局组件的高度不是当前窗口的 100%。我已经搜索了它的整个文档，但在下面找不到解决方案。

是否可以做任何事情来配置任何东西，以便 DashboardLayoutComponent 的高度可以是当前窗口的 100%(满足调整大小(，以便面板渲染的面板可以完全覆盖背景？

这是用于呈现仪表板布局组件的代码片段

<DashboardLayoutComponent
//mediaQuery="max-height: 100%"
cellSpacing={cellSpacing}
columns={10}
showGridLines={true}      
allowResizing={true}
allowDragging={true}
cellAspectRatio={1.1}
>
{PageLayout.map((grid, index) => (
<div
className="e-panel"
id={grid.id}
key={grid.id}
data-row={grid.row}
data-col={grid.col}
data-sizex={grid.sizeX}
data-sizey={grid.sizeY}
>
{grid.id}
</div>
))}
</DashboardLayoutComponent>

Answer 1

默认情况下，DashboardLayout 基于父元素维度呈现。如果不为父元素设置高度，则会将仪表板面板高度视为仪表板元素高度。

将父元素高度设置为 1000px 并将列属性设置为 10 时。仪表板基于 (10*10( 尺寸呈现的布局面板。每个面板高度为 100px。它根据仪表板布局组件的列属性拆分行和列。

请参阅以下链接以了解有关仪表板布局结构的更多信息。 https://ej2.syncfusion.com/react/documentation/dashboard-layout/setting-size-of-cells/

请参阅以下链接以设置仪表板布局组件的高度。

https://stackblitz.com/edit/react-6zgydw?file=index.css

使用 DashboardLayout 的 row， col 属性时，可以调整面板位置和大小。默认情况下，仪表板布局没有高度属性。

请参阅以下示例以调整屏幕中的仪表板布局。

https://stackblitz.com/edit/react-6zgydw-zuraci?file=index.css

了解有关仪表板布局组件的详细信息。请参阅以下链接。

UG 文档 https://ej2.syncfusion.com/react/documentation/dashboard 布局/入门/

演示链接 https://ej2.syncfusion.com/react/demos/#/material/dashboard 布局/默认

API 参考 https://ej2.syncfusion.com/react/documentation/api/dashboard 布局/