Position
Drop
Toggle

Position and arrow

Use js option position: <value> to specify popperjs placement.

If you want to control a specific drop position use [data-xt-position=<value>] on the .xt-drop

SyntaxDefault / ArgumentsDescription
Optionposition:Stringbottom-startPosition option for popperjs, can be bottom, bottom-start, bottom-end, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, auto, auto-start, auto-end.
Optioninset:BooleanfalseInset position inside

Use <div class="xt-arrow z-below -inset-1 m-3 w-3 h-3 bg-gray-200"></div> inside .xt-drop to add an arrow..

If you cange any of xt-drop padding or xt-arrow margin and size you need to revisit all of those sizes.

To not have space just omit .xt-drop padding and .xt-arrow margin.

To change the relative position of targets you can specify a query inside element, it doesn't change the element for events.

SyntaxDefault / ArgumentsDescription
OptionpositionInner:Query|falsefalseQuery inside element to use as relative for target position only if found

Popperjs

Here are the main spacing javascript options.

SyntaxDefault / ArgumentsDescription
Optionstrategy:String'absolute'Position strategy, can be 'absolute' or 'fixed'
OptionspaceOverflow:Number15Space to contain the drop
OptionspaceFlip:Number15Space to flip the drop
OptionspaceArrow:Number|falsefalseSpace for arrow, if false automatic

You can pass an option to popperjs for initialization.

If you need to get the popperjs instance use Xt.dataStorage.get(target, 'PopperInstance'), for example when you want to .update() it.

SyntaxDefault / ArgumentsDescription
Optionpopperjs:Object|falsetrueOptions for popperjs

Use strategy fixed when positioning inside fixed elements.

For example you can set preventOverflow boundary to constrain popperjs inside an element.

Static

If you want a drop with size and position relative to a parent Node with relative use .xt-drop-static and .xt-card.w-full.

SyntaxMixinVariantsDescription
Utility.xt-drop-staticxt-drop-staticresponsivePosition relative to closest element with .relative