Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 603af02

Browse filesBrowse files
woothuwoothu
committed
fix: CDataTable: fix header styles:
- vertically align text - prevent icon from overflow
1 parent f74ec0a commit 603af02
Copy full SHA for 603af02

File tree

2 files changed

+23
-43
lines changed
Filter options

2 files changed

+23
-43
lines changed

‎src/components/table/CDataTable.vue

Copy file name to clipboardExpand all lines: src/components/table/CDataTable.vue
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
:key="index"
5858
>
5959
<slot :name="`${rawColumnNames[index]}-header`">
60-
<div class="d-inline">{{name}}</div>
60+
<div>{{name}}</div>
6161
</slot>
6262
<slot
6363
v-if="isSortable(index)"
@@ -169,7 +169,7 @@
169169
:key="index"
170170
>
171171
<slot :name="`${rawColumnNames[index]}-header`">
172-
<div class="d-inline">{{name}}</div>
172+
<div>{{name}}</div>
173173
</slot>
174174
<slot
175175
v-if="isSortable(index)"
@@ -507,7 +507,7 @@ export default {
507507
return fields && fields[index]._classes ? fields[index]._classes : ''
508508
},
509509
headerStyles (index) {
510-
let style = ''
510+
let style = 'vertical-align:middle;overflow:hidden;'
511511
if (this.isSortable(index)) {
512512
style += `cursor:pointer;`
513513
}

‎src/components/table/tests/__snapshots__/CDataTable.spec.js.snap

Copy file name to clipboardExpand all lines: src/components/table/tests/__snapshots__/CDataTable.spec.js.snap
+20-40Lines changed: 20 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -151,11 +151,9 @@ exports[`CDataTable renders correctly 2`] = `
151151
<tr>
152152
<th
153153
class="user-custom-class position-relative pr-4"
154-
style="cursor: pointer; width: 40%;"
154+
style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 40%;"
155155
>
156-
<div
157-
class="d-inline"
158-
>
156+
<div>
159157
Username
160158
</div>
161159
@@ -173,11 +171,9 @@ exports[`CDataTable renders correctly 2`] = `
173171
</th>
174172
<th
175173
class="position-relative pr-4"
176-
style="cursor: pointer;"
174+
style="vertical-align: middle; overflow: hidden; cursor: pointer;"
177175
>
178-
<div
179-
class="d-inline"
180-
>
176+
<div>
181177
Registered
182178
</div>
183179
@@ -195,11 +191,9 @@ exports[`CDataTable renders correctly 2`] = `
195191
</th>
196192
<th
197193
class="position-relative pr-4"
198-
style="cursor: pointer; width: 20%;"
194+
style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
199195
>
200-
<div
201-
class="d-inline"
202-
>
196+
<div>
203197
Role
204198
</div>
205199
@@ -217,11 +211,9 @@ exports[`CDataTable renders correctly 2`] = `
217211
</th>
218212
<th
219213
class="position-relative pr-4"
220-
style="cursor: pointer; width: 20%;"
214+
style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
221215
>
222-
<div
223-
class="d-inline"
224-
>
216+
<div>
225217
Status
226218
</div>
227219
@@ -239,11 +231,9 @@ exports[`CDataTable renders correctly 2`] = `
239231
</th>
240232
<th
241233
class="position-relative pr-4"
242-
style="width: 1%;"
234+
style="vertical-align: middle; overflow: hidden; width: 1%;"
243235
>
244-
<div
245-
class="d-inline"
246-
>
236+
<div>
247237
248238
</div>
249239
@@ -509,11 +499,9 @@ exports[`CDataTable renders correctly 2`] = `
509499
<tr>
510500
<th
511501
class="user-custom-class position-relative pr-4"
512-
style="cursor: pointer; width: 40%;"
502+
style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 40%;"
513503
>
514-
<div
515-
class="d-inline"
516-
>
504+
<div>
517505
Username
518506
</div>
519507
@@ -531,11 +519,9 @@ exports[`CDataTable renders correctly 2`] = `
531519
</th>
532520
<th
533521
class="position-relative pr-4"
534-
style="cursor: pointer;"
522+
style="vertical-align: middle; overflow: hidden; cursor: pointer;"
535523
>
536-
<div
537-
class="d-inline"
538-
>
524+
<div>
539525
Registered
540526
</div>
541527
@@ -553,11 +539,9 @@ exports[`CDataTable renders correctly 2`] = `
553539
</th>
554540
<th
555541
class="position-relative pr-4"
556-
style="cursor: pointer; width: 20%;"
542+
style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
557543
>
558-
<div
559-
class="d-inline"
560-
>
544+
<div>
561545
Role
562546
</div>
563547
@@ -575,11 +559,9 @@ exports[`CDataTable renders correctly 2`] = `
575559
</th>
576560
<th
577561
class="position-relative pr-4"
578-
style="cursor: pointer; width: 20%;"
562+
style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
579563
>
580-
<div
581-
class="d-inline"
582-
>
564+
<div>
583565
Status
584566
</div>
585567
@@ -597,11 +579,9 @@ exports[`CDataTable renders correctly 2`] = `
597579
</th>
598580
<th
599581
class="position-relative pr-4"
600-
style="width: 1%;"
582+
style="vertical-align: middle; overflow: hidden; width: 1%;"
601583
>
602-
<div
603-
class="d-inline"
604-
>
584+
<div>
605585
606586
</div>
607587

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.