Basically I have a table that is scrollable, and in the last column is an ellipsis which opens a dropdown, but because the table is scrollable dropdown is being cut off.
If you look at the bootstrap's implementation of dropdowns with popper js they have a boundary option that you can pass.
This is how it looks like right now:
And this is my code so far:
<template>
<div class="relative">
<div @click="toggleDropdown" ref="trigger">
<slot name="trigger"></slot>
</div>
<div :class="[widthClass]"
@click="open = false"
class="rounded-md shadow-lg bg-white border border-gray-100 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
ref="menu"
v-show="open">
<div :class="contentClasses" class="rounded-md shadow-xs">
<slot name="content"></slot>
</div>
</div>
</div>
</template>
<script>
import {createPopper} from '@popperjs/core';
export default {
props: {
width : {
default: '48',
},
contentClasses: {
default: () => ['py-1'],
},
},
computed: {
widthClass() {
return {
'48': 'w-48',
'56': 'w-56',
'64': 'w-64',
}[this.width.toString()]
},
},
data() {
return {
open: false
}
},
methods: {
toggleDropdown() {
if (this.open) {
this.open = false;
} else {
this.open = true;
createPopper(this.$refs.trigger, this.$refs.menu, {
placement: 'bottom-start',
container: 'body',
modifiers: [
{
name : 'preventOverflow',
enabled: false,
options: {
boundary : document.body,
altBoundary : true,
rootBoundary: 'window',
}
}
]
});
}
},
},
}
</script>
Honestly, I have no idea what I'm doing, the popper js docs provide no examples, just diagrams. Help will be appreciated.
