Fix issue with sorting arrow pushing out alignment of table

This commit is contained in:
George Drummond 2019-01-18 14:22:30 -05:00
parent cb4d8e8330
commit 66fb6311b2
No known key found for this signature in database
GPG Key ID: 296DD6077123BF17
4 changed files with 10 additions and 6 deletions

View File

@ -32,6 +32,10 @@
display: table-cell;
}
}
.sorting-direction {
position: absolute;
}
}
tbody {

View File

@ -67,10 +67,10 @@
<tr>
<th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
!{ col.displayName }
<span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
{{ Icon("caret_down") }}
</span>
<span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
{{ Icon("caret_up") }}
</span>
</th>

View File

@ -26,10 +26,10 @@
<th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
!{ col.displayName }
<template v-if="col.sortFunc">
<span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
{{ Icon("caret_down") }}
</span>
<span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
<span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
{{ Icon("caret_up") }}
</span>
</template>

View File

@ -115,10 +115,10 @@
<tr>
<th @click.prevent="updateSortValue(column.attr)" v-for="column in getColumns()"scope="col">
!{ column.displayName }
<span v-if="column.attr === sort.columnName && sort.isAscending">
<span class="sorting-direction" v-if="column.attr === sort.columnName && sort.isAscending">
{{ Icon("caret_down") }}
</span>
<span v-else-if="column.attr === sort.columnName && !sort.isAscending">
<span class="sorting-direction" v-else-if="column.attr === sort.columnName && !sort.isAscending">
{{ Icon("caret_up") }}
</span>
</th>