calendar wrapper

[Vichondrias1]

How to fix this when I try to add svelte picker on a container in tailwind the calendar doesnt go outside the container.

I was expecting the calendar to be like this.

[mskocik]

Before 5.2.0 it's not possible to fix.

In 5.2.0 I added new property positionResolver where you can pass your own floating position resolving function. Svelty-picker uses floating-ui itself, so you can use it for your own resolver. It already provides detectOverflow function, which will be required to handle your use case properly.

[Vichondrias1]

Before 5.2.0 it's not possible to fix.

In 5.2.0 I added new property positionResolver where you can pass your own floating position resolving function. Svelty-picker uses floating-ui itself, so you can use it for your own resolver. It already provides detectOverflow function, which will be required to handle your use case properly.

can u give example how to use that new property you added?

[mskocik]

can u give example how to use that new property you added?

Just like any other prop:

<script>
function myPositionResolver(node) {
  // your code
}
</script>

<SveltyPicker positionResolver={myPositionResolver} />

If you have no idea how the resolver should/could look like, check the built-in position resolver:

svelty-picker/src/lib/utils/actions.js

Lines 1 to 33 in 8b1061b

	import { computePosition, autoUpdate, shift, flip } from '@floating-ui/dom';
	/**
	* @param {HTMLDivElement} node
	* @returns void
	*/
	export function usePosition(node) {
	if (node?.previousElementSibling === null) return;
	/** @type Element */
	const prevElement = node?.previousElementSibling;
	const removeFloating = autoUpdate(prevElement, node, () =>
	computePosition(prevElement, node, {
	placement: 'bottom-start',
	middleware: [
	shift({
	padding: 5
	}),
	flip()
	]
	}).then(({x, y}) => {
	Object.assign(node.style, {
	left: `${x}px`,
	top: `${y}px`,
	});
	})
	)
	return {
	destroy() {
	removeFloating();
	}
	}
	}

And build your own on top of it with detectOverflow helper function etc.

[Vichondrias1]

<SveltyPicker positionResolver={myPositionResolver} />

is it neccessary to add positionResolver function to fix my problem or the build in function you added should fix problem it and i dont do anything?

[mskocik]

is it neccessary to add positionResolver function to fix my problem or the build in function you added should fix problem it and i dont do anything?

Yes, it is neccessary to add positionResolver for your use case

[mskocik]

@Vichondrias1 were you successful with implementing your own resolver?

[Vichondrias1]

i havent figure it out how to use it can you please help me how solve this? dont quite understand sa how to fix this

[mskocik]

I gave you all information you need.

My time is precious so I can't help you for free. I believe you understand.

Anyway I am closing this one as root issue - ability to customize position resolver is fixed now.