flowbite-vue
flowbite-vue copied to clipboard
fix: dropdown content position does not react to content size
fixes #276
Run & review this pull request in StackBlitz Codeflow.
Deploy Preview for sensational-seahorse-8635f8 ready!
Name | Link |
---|---|
Latest commit | b5c4a572d9e652a22a1cc44e0c245b3e26c834a5 |
Latest deploy log | https://app.netlify.com/sites/sensational-seahorse-8635f8/deploys/65f552e0a757f9000815223f |
Deploy Preview | https://deploy-preview-277--sensational-seahorse-8635f8.netlify.app |
Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
You can use this modified version of FwbDropdownExamplePlacement.vue
to test:
<template>
<div class="vp-raw flex gap-2 flex-wrap">
<fwb-dropdown
text="Dropdown"
:placement="placement"
close-inside
>
<fwb-list-group>
<fwb-list-group-item
v-for="i in items"
:key="i"
>
{{ i }}
</fwb-list-group-item>
</fwb-list-group>
</fwb-dropdown>
<fwb-dropdown
placement="top"
text="Top"
>
<p class="p-2">
Dropdown content here
</p>
</fwb-dropdown>
<fwb-dropdown
placement="right"
text="Right"
>
<p class="p-2">
Dropdown content here
</p>
</fwb-dropdown>
<fwb-dropdown text="Bottom">
<p class="p-2">
Dropdown content here
</p>
</fwb-dropdown>
<fwb-dropdown
placement="left"
text="Left"
>
<p class="p-2">
Dropdown content here
</p>
</fwb-dropdown>
</div>
</template>
<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
import { onUnmounted, ref } from 'vue'
const items = ref([])
const placement = ref('top')
// Click the dropdown to activate it before this timeout ends
const interval = setInterval(() => {
if (items.value.length > 4) {
items.value = []
} else {
items.value.push('1', '2', '3')
}
if (placement.value === 'top') placement.value = 'bottom'
else if (placement.value === 'bottom') placement.value = 'left'
else if (placement.value === 'left') placement.value = 'right'
else placement.value = 'top'
}, 2000)
onUnmounted(() => clearInterval(interval))
</script>