sortable not dragging all columns of table in safari

Viewed 833

I have a vue bootstrap table that uses custom template for every cell using v-slot. All these cells are a custom component. I want the rows of this table to be sortable, that is, I want the users to be able to drag and drop rows in that table. for this I am using sortable JS. Everything is working fine. But I have a UI distortion in safari when dragging any row in the table.

Normal table: Normal table

table when I am dragging the first row in safari: dragging in safari

notice that the last column UI does not look like the row is getting dragged.

Here's code for table:

<template>
  <b-table
    v-sortable="sortableOptions"
    :items="getSortedForms"
    :fields="columns"
    :tbody-tr-class="rowClass"
    primary-key="key"
    show-empty
  >
    <template v-slot:empty>
      <!-- some content here -->
    </template>

    <template v-if="getSortedForms.length > 0" v-slot:head(selectFormAction)>
      <!-- check-box HTML here -->
    </template>
    <template v-slot:cell(col1)="form">
      <div :id="form.value.Key">
        <!-- check-box HTML here -->
      </div>
    </template>
    <template v-slot:cell(col2)="formItem">
      <!-- this is a custom component -->
      <form-display :formDTO="formItem.value" />
    </template>
    <template v-slot:cell(col3)="formStatusItem">
        <!-- some text here -->
      </div>
    </template>
    <template v-slot:cell(col4)="actionItem">
      <div>
        <!-- this is a custom component -->
        <form-progress-bar />
      </div>
    </template>
    <template v-slot:cell(col5)="utilityItem">
      <div class="utilitySet">
        <div
          v-for="(utility, id) in getSomeList()"
          :key="id"
        >
          <FormUtility :form="utilityItem.value.formDTO"></FormUtility>
        </div>     
      </div>
    </template>
  </b-table>
</template>

<script>
import { BTable } from "bootstrap-vue";
export default {
  name: "FormsList",
  directives: {
    sortable: {
      bind(el, binding, vnode) {
        const table = el;       
        Sortable.create(table.querySelector("tbody"), {});
      },
    },
  },
  components: {
    BTable,
  },
  data() {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
};
0 Answers
Related