Skip to content

Commit 79cc35d

Browse files
pomahtripomahtri
authored
CardView - demos - design fixes (#30140)
1 parent 1e7ff9e commit 79cc35d

File tree

83 files changed

+682
-520
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+682
-520
lines changed

‎apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717

1818
.option {
1919
margin: 10px;
20+
display: flex;
21+
align-items: center;
2022
width: fit-content;
2123
}
2224

‎apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,15 @@
3434
<dx-card-view
3535
[dataSource]="employees"
3636
keyExpr="ID"
37-
[cardMinWidth]="100"
38-
[wordWrapEnabled]="true"
37+
cardsPerRow="auto"
38+
[cardMinWidth]="300"
3939
>
4040
<dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel>
41-
<dxo-card-view-column-chooser [enabled]="true" [mode]="columnChooserMode">
41+
<dxo-card-view-column-chooser
42+
[enabled]="true"
43+
[mode]="columnChooserMode"
44+
height="340px"
45+
>
4246
<dxo-card-view-column-chooser-search [enabled]="searchEnabled">
4347
</dxo-card-view-column-chooser-search>
4448
<dxo-card-view-column-chooser-selection

‎apps/demos/Demos/CardView/ColumnChooser/React/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,16 @@ const App = () => {
6868
<CardView
6969
dataSource={employees}
7070
keyExpr="ID"
71-
cardMinWidth={100}
72-
wordWrapEnabled={true}
71+
cardsPerRow="auto"
72+
cardMinWidth={300}
7373
>
7474
<SearchPanel
7575
visible={true}
7676
/>
7777
<ColumnChooser
7878
enabled={true}
7979
mode={columnChooserMode}
80+
height="340px"
8081
>
8182
<ColumnChooserSearch
8283
enabled={searchEnabled}

‎apps/demos/Demos/CardView/ColumnChooser/React/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717

1818
.option {
1919
margin: 10px;
20+
display: flex;
21+
align-items: center;
2022
width: fit-content;
2123
}
2224

‎apps/demos/Demos/CardView/ColumnChooser/ReactJs/App.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,14 @@ const App = () => {
6969
<CardView
7070
dataSource={employees}
7171
keyExpr="ID"
72-
cardMinWidth={100}
73-
wordWrapEnabled={true}
72+
cardsPerRow="auto"
73+
cardMinWidth={300}
7474
>
7575
<SearchPanel visible={true} />
7676
<ColumnChooser
7777
enabled={true}
7878
mode={columnChooserMode}
79+
height="340px"
7980
>
8081
<ColumnChooserSearch enabled={searchEnabled} />
8182
<ColumnChooserSelection

‎apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717

1818
.option {
1919
margin: 10px;
20+
display: flex;
21+
align-items: center;
2022
width: fit-content;
2123
}
2224

‎apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
<DxCardView
4040
:data-source="employees"
4141
key-expr="ID"
42-
:card-min-width="100"
43-
:word-wrap-enabled="true"
42+
cards-per-row="auto"
43+
:card-min-width="300"
4444
:selected-card-keys="[4, 6]"
4545
>
4646
<DxSearchPanel
@@ -49,6 +49,7 @@
4949
<DxColumnChooser
5050
:enabled="true"
5151
:mode="columnChooserMode"
52+
height="340px"
5253
>
5354
<DxColumnChooserSearch
5455
:enabled="searchEnabled"
@@ -92,7 +93,7 @@
9293
<script setup lang="ts">
9394
import { ref } from 'vue';
9495
import {
95-
DxCardView, DxColumn, DxCardCover, DxSearchPanel, DxColumnChooser, DxColumnChooserSearch, DxColumnChooserSelection
96+
DxCardView, DxColumn, DxCardCover, DxSearchPanel, DxColumnChooser, DxColumnChooserSearch, DxColumnChooserSelection,
9697
} from 'devextreme-vue/card-view';
9798
import { DxSelectBox } from 'devextreme-vue/select-box';
9899
import { DxCheckBox } from 'devextreme-vue/check-box';
@@ -136,6 +137,8 @@ const selectByClick = ref(true);
136137
137138
.option {
138139
margin: 10px;
140+
display: flex;
141+
align-items: center;
139142
width: fit-content;
140143
}
141144

‎apps/demos/Demos/CardView/ColumnChooser/jQuery/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ $(() => {
22
const cardView = $('#card-view').dxCardView({
33
dataSource: employees,
44
keyExpr: 'ID',
5-
cardMinWidth: 100,
6-
wordWrapEnabled: true,
5+
cardsPerRow: 'auto',
6+
cardMinWidth: 300,
77
columnChooser: {
88
enabled: true,
99
mode: 'select',
10+
height: '340px',
1011
search: {
1112
enabled: true,
1213
},

‎apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717

1818
.option {
1919
margin: 10px;
20+
display: flex;
21+
align-items: center;
2022
width: fit-content;
2123
}
2224

‎apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
id="cardView"
33
[dataSource]="orders"
44
keyExpr="OrderNumber"
5-
[cardMinWidth]="100"
5+
cardsPerRow="auto"
6+
[cardMinWidth]="280"
67
[wordWrapEnabled]="true"
78
>
89
<dxo-card-view-header-filter [visible]="true"></dxo-card-view-header-filter>

0 commit comments

Comments
 (0)