Skip to content

Commit 0f84349

Browse files
nekosaurjohnleider
nekosaur
authored and
johnleider
committed
fix(VDataTable): overlapping text in mobile rows (#9639)
* fix(VDataTable): overlapping text in mobile rows closes #8761 * style(VMobileRow): update code styling
1 parent b43716c commit 0f84349

File tree

3 files changed

+60
-65
lines changed

3 files changed

+60
-65
lines changed

‎packages/vuetify/src/components/VDataTable/MobileRow.ts

+15-8
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,21 @@ export default Vue.extend({
3737
children.push(value)
3838
}
3939

40-
return h('td', {
41-
class: classes,
42-
}, [
43-
h('div', { staticClass: 'v-data-table__mobile-row__wrapper' }, [
44-
header.value !== 'dataTableSelect' && h('div', { staticClass: 'v-data-table__mobile-row__header' }, [header.text]),
45-
h('div', { staticClass: 'v-data-table__mobile-row__cell' }, children),
46-
]),
47-
])
40+
const mobileRowChildren = [
41+
h('div', {
42+
staticClass: 'v-data-table__mobile-row__cell',
43+
}, children),
44+
]
45+
46+
if (header.value !== 'dataTableSelect') {
47+
mobileRowChildren.unshift(
48+
h('div', {
49+
staticClass: 'v-data-table__mobile-row__header',
50+
}, [header.text])
51+
)
52+
}
53+
54+
return h('td', { class: classes }, mobileRowChildren)
4855
})
4956

5057
return h('tr', data, columns)

‎packages/vuetify/src/components/VDataTable/VDataTable.sass

+7-7
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,17 @@
2727
&.v-data-table__expanded__content
2828
box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75)
2929

30+
.v-data-table__mobile-row
31+
height: initial
32+
min-height: 48px
33+
3034
.v-data-table__empty-wrapper
3135
text-align: center
3236

3337
.v-data-table__mobile-row
34-
display: block
35-
36-
&__wrapper
37-
height: 100%
38-
display: flex
39-
justify-content: space-between
40-
align-items: center
38+
align-items: center
39+
display: flex
40+
justify-content: space-between
4141

4242
&__header
4343
font-weight: 600

‎packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap

+38-50
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,23 @@
33
exports[`MobileRow should render with regular slots 1`] = `
44
<tr>
55
<td class="v-data-table__mobile-row">
6-
<div class="v-data-table__mobile-row__wrapper">
7-
<div class="v-data-table__mobile-row__header">
8-
Petrol
9-
</div>
10-
<div class="v-data-table__mobile-row__cell">
11-
<p class="test">
12-
$0.68
13-
</p>
14-
</div>
6+
<div class="v-data-table__mobile-row__header">
7+
Petrol
8+
</div>
9+
<div class="v-data-table__mobile-row__cell">
10+
<p class="test">
11+
$0.68
12+
</p>
1513
</div>
1614
</td>
1715
<td class="v-data-table__mobile-row">
18-
<div class="v-data-table__mobile-row__wrapper">
19-
<div class="v-data-table__mobile-row__header">
20-
Diesel
21-
</div>
22-
<div class="v-data-table__mobile-row__cell">
23-
<p class="test">
24-
$0.65
25-
</p>
26-
</div>
16+
<div class="v-data-table__mobile-row__header">
17+
Diesel
18+
</div>
19+
<div class="v-data-table__mobile-row__cell">
20+
<p class="test">
21+
$0.65
22+
</p>
2723
</div>
2824
</td>
2925
</tr>
@@ -32,27 +28,23 @@ exports[`MobileRow should render with regular slots 1`] = `
3228
exports[`MobileRow should render with scoped slots 1`] = `
3329
<tr>
3430
<td class="v-data-table__mobile-row">
35-
<div class="v-data-table__mobile-row__wrapper">
36-
<div class="v-data-table__mobile-row__header">
37-
Petrol
38-
</div>
39-
<div class="v-data-table__mobile-row__cell">
40-
<p class="test petrol">
41-
0.68
42-
</p>
43-
</div>
31+
<div class="v-data-table__mobile-row__header">
32+
Petrol
33+
</div>
34+
<div class="v-data-table__mobile-row__cell">
35+
<p class="test petrol">
36+
0.68
37+
</p>
4438
</div>
4539
</td>
4640
<td class="v-data-table__mobile-row">
47-
<div class="v-data-table__mobile-row__wrapper">
48-
<div class="v-data-table__mobile-row__header">
49-
Diesel
50-
</div>
51-
<div class="v-data-table__mobile-row__cell">
52-
<p class="test diesel">
53-
0.65
54-
</p>
55-
</div>
41+
<div class="v-data-table__mobile-row__header">
42+
Diesel
43+
</div>
44+
<div class="v-data-table__mobile-row__cell">
45+
<p class="test diesel">
46+
0.65
47+
</p>
5648
</div>
5749
</td>
5850
</tr>
@@ -61,23 +53,19 @@ exports[`MobileRow should render with scoped slots 1`] = `
6153
exports[`MobileRow should render without slots 1`] = `
6254
<tr>
6355
<td class="v-data-table__mobile-row">
64-
<div class="v-data-table__mobile-row__wrapper">
65-
<div class="v-data-table__mobile-row__header">
66-
Petrol
67-
</div>
68-
<div class="v-data-table__mobile-row__cell">
69-
0.68
70-
</div>
56+
<div class="v-data-table__mobile-row__header">
57+
Petrol
58+
</div>
59+
<div class="v-data-table__mobile-row__cell">
60+
0.68
7161
</div>
7262
</td>
7363
<td class="v-data-table__mobile-row">
74-
<div class="v-data-table__mobile-row__wrapper">
75-
<div class="v-data-table__mobile-row__header">
76-
Diesel
77-
</div>
78-
<div class="v-data-table__mobile-row__cell">
79-
0.65
80-
</div>
64+
<div class="v-data-table__mobile-row__header">
65+
Diesel
66+
</div>
67+
<div class="v-data-table__mobile-row__cell">
68+
0.65
8169
</div>
8270
</td>
8371
</tr>

0 commit comments

Comments
 (0)