Columns dropdown <ul> has visibility set to hidden and opacity set to zero

[boriskogan81]

• Vue.js version: 2.5.16
• consumed using: (browserify/webpack/rollup): Webpack (via Vue-CLI 3)
• FULL error message (including stack trace): NA
• relevant code:

      <b-row class="mt-2 mb-5">
          <v-client-table class="visible" v-if="events" :data="generalFilter" :columns="columns"
                          :options="options"
                          name="eventTable">
              <b-form-checkbox slot="h__selected" class="align-self-auto" v-on:click="toggleSelectAll()"/>
              <b-form-checkbox  slot="selected" slot-scope="props" v-on:click="toggleSelectItem(props.row)"/>
          </v-client-table>
      </b-row>
  ...
      data () {
          return {
              columns:
                  [
                      'selected', 'severity','endpointLabel','fileName', 'filePath','malwareType',
                      'component', 'eventType','eventSubtype', 'epAvailability', 'timestamp'
                  ],
              options: {
                  filterByColumn: true,
                  theme: 'bootstrap4',
                  template: 'footerPagination',
                  sortable: [ 'severity','endpointLabel','fileName', 'malwareType',
                      'component', 'eventType','eventSubtype', 'epAvailability', 'timestamp'],
                  filterable: [ 'endpointLabel','fileName', 'filePath','malwareType',
                      'component', 'eventType','eventSubtype', 'timestamp'],
                  headings: {
                      endpointLabel: 'Endpoint',
                      fileName:'File name',
                      filePath: 'File path',
                      malwareType: 'Malware type',
                      component: 'Originating component',
                      eventType: 'Event type',
                      eventSubtype: 'Event subtype',
                      epAvailability:'Endpoint availability',
                      timestamp: 'Time'
                  },
                  dateColumns:['timestamp'],
                  dateFormatPerColumn: {timestamp: 'DD/MM/YYYY'},
                  toMomentFormat: 'YYYY-MM-DDTHH:mm:ss.SSSZ',
                  columnsDropdown: true
              }

  The dropdown is not visible when the columns button is clicked. Looking at the element, I can see that its visibility is set to hidden and opacity is 0.

Is there a good way for me to manage the columns button? I'd like to add an id to it, as well as manage its placement (it's currently appearing in an inconvenient location.)

[rSammy]

Please create jsFiddle

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.