VueJS Bootstrap <date-picker> is hidden in <b-table> row

Question

I'm using VueJS (v2.6.10) and boostrap-vue (v2.0) and trying to allow users to enter a datetime for a record in a <b-table> using the using vue-bootstrap-datetimepicker (v5.0.1).

The issue is that the <date-picker> is always hidden when the input field is clicked. What is a proper way to allow a user to select a date/time for an input field in a <b-table> row (if any)?

<b-table bordered :items="items" :fields="visibleFields">
...
    <template slot="next_scheduled_time" slot-scope="row">
      <div style="font-size: 20px; font-weight: bold; position: relative;" class="d-flex align-items-center justify-content-center">
        <date-picker style="width:140px" v-model="row.item.next_scheduled_time" :config="datetime_options" :placeholder="row.item.next_scheduled_time"/>
      </div>
    </template>
...
</b-table>

Answer 1

You have incorrect slot syntax. Correct syntax is seen here in the Bootstrap Vue documentation for b-table.

Scoped field slots use the following naming syntax: 'cell(' + field key + ')'

Given a field next_scheduled_time the slot would be:

<template #cell(next_scheduled_time)="data">
  <div
    style="font-size: 20px; font-weight: bold; position: relative"
    class="d-flex align-items-center justify-content-center"
  >
    <date-picker
      v-model="data.item.next_scheduled_time"
      :config="options"
    ></date-picker>
  </div>
</template>

The above code works ok when I test inside a codesandbox

Answer 2

an improperly scoped block with this CSS in another vue file was the issue...

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}