File tree 2 files changed +30
-36
lines changed
examples/Demo/Shared/Pages/DataGrid
2 files changed +30
-36
lines changed Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change 2
2
@using FluentUI .Demo .Shared .Pages .DataGrid .Examples
3
3
4
4
<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 " }) " >
6
6
<Description >
7
7
<p >
8
8
The example and code below show what you need to get auto items per page functionality for the pagination of a datagrid.
21
21
</Description >
22
22
</DemoSection >
23
23
24
- <CodeSnippet >
25
- < ; 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
- < ; /style>
57
-
58
- </CodeSnippet >
59
24
<style >
60
25
61
26
#datagrid-container {
You can’t perform that action at this time.
0 commit comments