Dropdown offset

[clementmas]

At the moment the dropdown offset is hardcoded to [0, 10].

It would be great to add support for a new data attribute like data-dropdown-offset="0,10". Or possibly data-dropdown-offset-x="0" and data-dropdown-offset-y="10". Easier to parse in the code but I personally prefer the first option.

Meanwhile, the workaround I found was to add Tailwind classes like !-bottom-2 to override the position.

Let me know your thoughts. Thanks for the great library!

[dofirfauzi]

how to overide inline style on dropdown style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(327px, 70px);

[zoltanszogyenyi]

Hello @clementmas,

This is a reasonable request and we'll add the offset option to both dropdowns and tooltips.

This option is already available for a newer components such as the Popover.

[dofirfauzi]

@zoltanszogyenyi can you add option to set position, absolute or relative, i need to change that base on screen width. like in bootstrap navbar dropdown, in mobile position is relative but in desktop position absolute.

thanks.

[syazre]

Hello @zoltanszogyenyi, is there any update on offset option for dropdowns? Thanks.

[zoltanszogyenyi]

This will be addressed in the upcoming v1.6.0 update.

[zoltanszogyenyi]

@clementmas @dofirfauzi @syazre dropdown offset distance and skidding has been added as options starting from v1.5.6 (unreleased ATM) via this commit https://github.com/themesberg/flowbite/commit/9a7c3e1618afee400e25a2bf6ac96e4e34d0d5fa with examples included.

• offsetDistance: this will set the distance between the dropdown and button
• offsetSkidding: this will move the dropdown menu up or down along the button (or left and right if positioned on the top or bottom)

ETA couple of days to be on NPM.