Skip to content

Commit 5a18d1e

Browse files
committed
Fix a small DataGrid documentation issue
1 parent 02371f5 commit 5a18d1e

File tree

2 files changed

+30
-36
lines changed

2 files changed

+30
-36
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#datagrid-container {
2+
height: calc(100% - 3rem);
3+
min-height: 8rem;
4+
overflow-x: auto;
5+
overflow-y: hidden;
6+
}
7+
8+
article {
9+
min-height: 32rem;
10+
max-height: 80dvh;
11+
}
12+
13+
.demo-section-content {
14+
height: calc(100% - 10rem);
15+
}
16+
17+
.demo-section-example {
18+
min-height: 135px !important;
19+
height: 100%;
20+
}
21+
22+
fluent-tabs {
23+
height: 100%;
24+
}
25+
26+
#tab-example-autoitemsperpage-panel {
27+
height: 100% !important;
28+
max-height: calc(100% - 2rem) !important;
29+
}

examples/Demo/Shared/Pages/DataGrid/Pages/DataGridAutoItemsPerPagePage.razor

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
33

44
<PageTitle>Auto items per page</PageTitle>
5-
<DemoSection Title="Auto items per page" Component="@typeof(DataGridAutoItemsPerPage)">
5+
<DemoSection Title="Auto items per page" Component="@typeof(DataGridAutoItemsPerPage)" AdditionalFiles="@(new[]{"CustomCSS.css"})">
66
<Description>
77
<p>
88
The example and code below show what you need to get auto items per page functionality for the pagination of a datagrid.
@@ -21,41 +21,6 @@
2121
</Description>
2222
</DemoSection>
2323

24-
<CodeSnippet>
25-
&lt;style>
26-
27-
#datagrid-container {
28-
height: calc(100% - 3rem);
29-
min-height: 8rem;
30-
overflow-x: auto;
31-
overflow-y: hidden;
32-
}
33-
34-
article {
35-
min-height: 32rem;
36-
max-height: 80dvh;
37-
}
38-
39-
.demo-section-content {
40-
height: calc(100% - 10rem);
41-
}
42-
43-
.demo-section-example {
44-
min-height: 135px!important;
45-
height: 100%;
46-
}
47-
48-
fluent-tabs {
49-
height: 100%;
50-
}
51-
52-
#tab-example-autoitemsperpage-panel {
53-
height: 100% !important;
54-
max-height: calc(100% - 2rem) !important;
55-
}
56-
&lt;/style>
57-
58-
</CodeSnippet>
5924
<style>
6025
6126
#datagrid-container {

0 commit comments

Comments
 (0)